How to stop Form submit if the validation fails

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 re-iterate what I'm doing: I have a form with bunch of input fields and when the user hit the submit button it validate form using attribute required="required" if the form validation fails THEN I want to stop submitting the form as you see the javascript it show the div when the user submit the form.

Hope this clears up.

END UPDATE

How can I stop the form submit to fire if the form validation 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();
 });

see http://stackoverflow.com/questions/9347282/using-jquery-preventing-form-from-submitting — m02ph3u5, Feb 18 '16 at 16:45
thanks for link but the link you have posted is about `preventing form from submitting' but i want to prevent only when the validation fails — Nick Kahn, Feb 18 '16 at 16:54
See `checkValidity()`: http://stackoverflow.com/questions/5929186/how-to-prevent-form-submission-while-using-html5-client-side-form-validation-in — m02ph3u5, Feb 18 '16 at 16:57
The fact that you have attributes `data-val="true"` and `required="required"` suggest your creating this html manually. Use the html helpers - `@Html.TextBoxFor()` and `@Html.ValidationMessageFor() so the correct attributes are generated and add the `[Required]` attribute to your property and include the relevant `jquery.validate.js` and `jquery.validate.unobtrusive.js` files and this is all handled out if the box. — , Feb 18 '16 at 23:25

score 24 · Answer 1 · answered Feb 18 '16 at 16:58

24

You need to do two things if validation fails, e.preventDefault() and to return false.

For your example, with the input given, the pseudo code might be the next:

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

answered Feb 18 '16 at 16:58

Farside

9,923
4
47
60

1

This really works. Thanks! – Primoshenko Mar 31 '22 at 15:26

score 10 · Accepted Answer · answered Feb 19 '16 at 02:41

10

I able to fixed the problem:

First add the ref on 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();
            }
        });

answered Feb 19 '16 at 02:41

Nick Kahn

19,652
91
275
406

why so complicated? why to use both jquery.validate and jquery.validate.unobtrusive ? – Farside Feb 19 '16 at 11:00
what do you mean by complicated? you mean i can use any one of the .js ? – Nick Kahn Feb 19 '16 at 16:26
no, I just don't know your context, may be you need it for some reason. I'd say with the data given - you don't need it. – Farside Feb 22 '16 at 14:05
This is **exactly** what I needed. My code has been broken for weeks and users submitting invalid data. I was using this stupid check: `if (!this.checkValidity() || !this.reportValidity())`. – PatPeter Oct 19 '19 at 19:43
Simplification: script "jquery.validate.unobtrusive.min.js" is not required, "jquery.validate.js" is sufficient – Davy Nov 02 '20 at 09:11

Cheezy Code · Answer 3 · 2016-02-20T18:57:07.077

2

Write your validation code on 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>

edited Feb 20 '16 at 18:57

answered Feb 19 '16 at 05:40

Cheezy Code

1,685
1
14
18

2

it's not good approach. You have to prevent the form *submit*, not the click on the button. If you'll press ENTER - the form will be submitted outside of your handlers. – Farside Feb 19 '16 at 10:58
Yes good point. I have changed my code slightly to consider your case. – Cheezy Code Feb 20 '16 at 18:58

How to stop Form submit if the validation fails

3 Answers3

Linked