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

 });