停止提交表单，使用Jquery

Question

我试图阻止我的表单提交，如果验证失败。我试着按照这previous post，但我不为我工作。我错过了什么？

<input id="saveButton" type="submit" value="Save" /> 
<input id="cancelButton" type="button" value="Cancel" /> 
<script src="../../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
<script type="text/javascript"> 

    $(document).ready(function() { 
     $("form").submit(function (e) { 
      $.ajax({ 
       url: '@Url.Action("HasJobInProgress", "ClientChoices")/', 
       data: { id: '@Model.ClientId' }, 
       success: function (data) { 
        showMsg(data, e); 
       }, 
       cache: false 
      }); 
     }); 
    }); 
    $("#cancelButton").click(function() { 
     window.location = '@Url.Action("list", "default", new { clientId = Model.ClientId })'; 
    }); 
    $("[type=text]").focus(function() { 
     $(this).select(); 
    }); 
    function showMsg(hasCurrentJob, sender) { 
     if (hasCurrentJob == "True") { 
      alert("The current clients has a job in progress. No changes can be saved until current job completes"); 
      if (sender != null) { 
       sender.preventDefault(); 
      } 
      return false; 
     } 
    } 

</script> 

Answer 1

此外，AJAX是异步的。所以showMsg函数只有在服务器成功响应后才会被调用。并且表单提交事件不会等到AJAX成功。

将e.preventDefault();作为点击处理程序中的第一行。

$("form").submit(function (e) { 
     e.preventDefault(); // this will prevent from submitting the form. 
     ... 

请参见下面的代码，

我想这是允许的HasJobInProgress ==假

$(document).ready(function() { 
    $("form").submit(function (e) { 
     e.preventDefault(); //prevent default form submit 
     $.ajax({ 
      url: '@Url.Action("HasJobInProgress", "ClientChoices")/', 
      data: { id: '@Model.ClientId' }, 
      success: function (data) { 
       showMsg(data); 
      }, 
      cache: false 
     }); 
    }); 
}); 
$("#cancelButton").click(function() { 
    window.location = '@Url.Action("list", "default", new { clientId = Model.ClientId })'; 
}); 
$("[type=text]").focus(function() { 
    $(this).select(); 
}); 
function showMsg(hasCurrentJob) { 
    if (hasCurrentJob == "True") { 
     alert("The current clients has a job in progress. No changes can be saved until current job completes"); 
     return false; 
    } else { 
     $("form").unbind('submit').submit(); 
    } 
} 

Answer 2

尝试下面的代码。 e.preventDefault（）增加了。这将删除窗体的默认事件操作。

$(document).ready(function() { 
    $("form").submit(function (e) { 
     $.ajax({ 
      url: '@Url.Action("HasJobInProgress", "ClientChoices")/', 
      data: { id: '@Model.ClientId' }, 
      success: function (data) { 
       showMsg(data, e); 
      }, 
      cache: false 
     }); 
     e.preventDefault(); 
    }); 
}); 

另外，你提到你希望表单在验证的前提下不提交，但我在这里看不到代码验证？

下面是一些添加了验证

$(document).ready(function() { 
    $("form").submit(function (e) { 
     /* put your form field(s) you want to validate here, this checks if your input field of choice is blank */ 
    if(!$('#inputID').val()){ 
     e.preventDefault(); // This will prevent the form submission 
    } else{ 
     // In the event all validations pass. THEN process AJAX request. 
     $.ajax({ 
      url: '@Url.Action("HasJobInProgress", "ClientChoices")/', 
      data: { id: '@Model.ClientId' }, 
      success: function (data) { 
       showMsg(data, e); 
      }, 
      cache: false 
     }); 
    } 


    }); 
}); 

Answer 3

使用的示例这个太：

if(e.preventDefault) 
    e.preventDefault(); 
else 
    e.returnValue = false; 

Becoz e.preventDefault（）不支持IE（一些版本）。在IE中它是e.returnValue =假

Answer 4

一种不同的方法可以是

<script type="text/javascript"> 
    function CheckData() { 
    //you may want to check something here and based on that wanna return true and false from the   function. 
    if(MyStuffIsokay) 
    return true;//will cause form to postback to server. 
    else 
     return false;//will cause form Not to postback to server 
    } 
    </script> 
    @using (Html.BeginForm("SaveEmployee", "Employees", FormMethod.Post, new { id = "EmployeeDetailsForm" })) 
    { 
    ......... 
    ......... 
    ......... 
    ......... 
    <input type="submit" value= "Save Employee" onclick="return CheckData();"/> 
    }