Stop submit form using jQuery

Question

I am trying to stop form submission if validation fails. I tried the following previous post , but I am not working for me. What am I missing?

<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

Again, AJAX is asynchronous. Thus, the showMsg function is only called after a response to success from the server .. and the form submission event will not wait for AJAX success.

Move e.preventDefault(); as the first line in the click handler.

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

See below code

I want this to be allowed 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

use this too:

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

Becoz e.preventDefault () is not supported in IE (some versions). In IE, this is e.returnValue = false

Answer 3

Try the code below. Added e.preventDefault () . This removes the default action for the form.

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

In addition, you mentioned that you want the form not to be submitted in accordance with the prerequisite for verification, but I do not see the code verification here?

Here is an example of some additional 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

Another approach could be

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