停止提交表单，使用Jquery

如果validation失败，我试图阻止提交表单。 我试着按照以前的文章，但我不为我工作。 我错过了什么？

<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是asynchronous的。 所以showMsg函数只有在服务器成功响应后才会被调用，并且表单提交事件不会等到AJAX成功。

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

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

看下面的代码，

我希望它被允许HasJobInProgress == False

 $(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

也使用这个：

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

IE（某些版本）不支持Becoz e.preventDefault（ ）。 在IE中是e.returnValue = false

Answer 3

尝试下面的代码。 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(); }); }); 

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

这里是一些添加validation的例子

  $(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 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();"/> }