title: Validation not working on submit
body: <p>I've tried a form validation using <code>jquery.validate.min.js</code>.</p>
  
  <p>When i click submit button that will show the empty required fields with red border. Problem is page was loading while click submit button.</p>
  
  <p>Validation not working. Don't know where is the issue. Thanks in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(".submit-form").validate({
                 rules: {
                     fname: {
                         required: true,
                     },
                     lname: {
                         required: true,
                     },
                     phone: {
                         required: true,
                     },
                     mail: {
                         required: true,
                         mail: true
                     },
                     subjct: {
                         required: true,
                     },
                     message: {
                         required: true,
                     },
                 },
                 submitHandler: function (form) {
                     var postData = $(form).serializeArray();
                     var result = {};
                     $.each(postData, function () {
                         result[this.name] = this.value;
                     });
                     return false;
                 },
                 invalidHandler: function (form, validator) {
                     $('form input,textarea').each(function () {
                         if ($(this).val() == "") {
                             $(this).css('border', '1px solid red');
                         } else {
                             $(this).css('border', '1px solid #d2d2d2');
                         }
                     });
                 },
                 errorPlacement: function (error, element) {
                     return true;
                 }
             });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;form class="submit-form" method="post"&gt;
                          &lt;div class="row input-row-common"&gt;
                              &lt;div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12"&gt;
                                  &lt;input type="name" class="input-common fname" name="fname" placeholder="First Name"&gt;
                              &lt;/div&gt;
  
                              &lt;div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"&gt;
                                  &lt;input type="name" class="input-common" name="lname" placeholder="Last Name"&gt;
                              &lt;/div&gt;
                              &lt;div class="col-lg-offset-2 col-md-offset-2"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row input-row-common"&gt;
                              &lt;div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12"&gt;
                                  &lt;input type="name" class="input-common" name="phone" id="phone" placeholder="Number"&gt;
                              &lt;/div&gt;
  
                              &lt;div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"&gt;
                                  &lt;input type="email" class="input-common" name="mail" placeholder="Email ID"&gt;
                              &lt;/div&gt;
                              &lt;div class="col-lg-offset-2 col-md-offset-2"&gt;&lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="row input-row-common"&gt;
                              &lt;div class="col-lg-offset-2 col-lg-8 col-md-offset-2 col-md-8 col-sm-12 col-xs-12"&gt;
                                  &lt;textarea placeholder="Message" name="message" class="input-txtarea"&gt;&lt;/textarea&gt;
                              &lt;/div&gt;
                              &lt;div class="col-lg-offset-2 col-md-offset-2"&gt;&lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="row input-row-common"&gt;
                              &lt;div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-12 col-xs-12"&gt;
                                  &lt;input type="submit" class="submit" value="send message"&gt;
                              &lt;/div&gt;
                              &lt;div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-8"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>