How to stop form submission if validation is not completed

Question

UPDATE: my question is more about How to prevent the form submit if the validation fails

the link does not solve my problem

just try again what I'm doing: I have a form with a bunch of input fields, and when the user clicks the submit button, it validates the form using the required="required" attribute if the form is not validated. Then I want to stop submitting the form, as you see javascript, it shows a div when the user submits the form.

Hope this clears up.

END UPDATE

How can I stop sending a form to fire if the form check fails?

 <input class="form-control" data-val="true" id="SerialNumber" name="SerialNumber" required="required" type="text"> <button type="submit" name="rsubmit" class="btn btn-success">Submit</button> //loading message: $("form").submit(function (e) { $("#loading").show(); }); 

Answer 1

I was able to fix the problem:

First add a link to your page:

 <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script> 

then do this check:

  $("form").submit(function () { if ($(this).valid()) { //<<< I was missing this check $("#loading").show(); } }); 

Answer 2

You need to do two things if the check is not completed, e.preventDefault () and return false.

In your example, with the specified input, the pseudocode could be as follows:

 $("form").submit(function (e) { var validationFailed = false; // do your validation here ... if (validationFailed) { e.preventDefault(); return false; } }); 

Answer 3

Write your verification code on the onsubmit handler of your form like this

 <form onsubmit="return Validation()"> <input class="form-control" data-val="true" id="SerialNumber" name="SerialNumber" required="required" type="text"> <button type="submit" name="rsubmit" class="btn btn-success">Submit</button> <script> function Validation(){ //Do all your validation here //Return true if validation is successful, false if not successful //It will not submit in case of false. return true or false; } </script> </form>