21

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();
 });
Improve this question
6
  • try to return false; Commented Feb 18, 2016 at 16:44
  • where should i put return false; Commented Feb 18, 2016 at 16:45
  • 2
    see stackoverflow.com/questions/9347282/… Commented Feb 18, 2016 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 Commented Feb 18, 2016 at 16:54
  • See checkValidity(): stackoverflow.com/questions/5929186/… Commented Feb 18, 2016 at 16:57

3 Answers 3

Reset to default
27

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;
   }
});
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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();
            }
        });
Improve this answer

5 Comments

why so complicated? why to use both jquery.validate and jquery.validate.unobtrusive ?
what do you mean by complicated? you mean i can use any one of the .js ?
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.
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()).
Simplification: script "jquery.validate.unobtrusive.min.js" is not required, "jquery.validate.js" is sufficient
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>
Improve this answer

2 Comments

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.
Yes good point. I have changed my code slightly to consider your case.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.