How to stop Form submit if the validation fails
<p>UPDATE:
my question is more about <code>How to prevent the form submit if the validation fails</code></p>

<p>the link does not solve my problem</p>

<p>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 <code>required="required"</code> 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.</p>

<p>Hope this clears up.</p>

<p>END UPDATE</p>

<p>How can I stop the form submit to fire if the form validation fails?</p>

<pre><code>&lt;input class="form-control" data-val="true" id="SerialNumber" name="SerialNumber" required="required" type="text"&gt;

&lt;button type="submit" name="rsubmit" class="btn btn-success"&gt;Submit&lt;/button&gt;

 //loading message:
 $("form").submit(function (e) {
     $("#loading").show();
 }); 
</code></pre>