Validation not working on submit

Question

I've tried a form validation using jquery.validate.min.js.

When i click submit button that will show the empty required fields with red border. Problem is page was loading while click submit button.

Validation not working. Don't know where is the issue. Thanks in advance.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form class="submit-form" method="post">
                        <div class="row input-row-common">
                            <div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12">
                                <input type="name" class="input-common fname" name="fname" placeholder="First Name">
                            </div>

                            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                <input type="name" class="input-common" name="lname" placeholder="Last Name">
                            </div>
                            <div class="col-lg-offset-2 col-md-offset-2"></div>
                        </div>
                        <div class="row input-row-common">
                            <div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12">
                                <input type="name" class="input-common" name="phone" id="phone" placeholder="Number">
                            </div>

                            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                <input type="email" class="input-common" name="mail" placeholder="Email ID">
                            </div>
                            <div class="col-lg-offset-2 col-md-offset-2"></div>
                        </div>

                        <div class="row input-row-common">
                            <div class="col-lg-offset-2 col-lg-8 col-md-offset-2 col-md-8 col-sm-12 col-xs-12">
                                <textarea placeholder="Message" name="message" class="input-txtarea"></textarea>
                            </div>
                            <div class="col-lg-offset-2 col-md-offset-2"></div>
                        </div>

                        <div class="row input-row-common">
                            <div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-12 col-xs-12">
                                <input type="submit" class="submit" value="send message">
                            </div>
                            <div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-8"></div>
                        </div>
                    </form>

Answer 1

Check out this answer

jQuery(function ($) {
          $("#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;
              }
          });
      })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

<form id="submit-form" method="post">
                       <div class="row input-row-common">
                           <div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12">
                               <input type="name" class="input-common fname" name="fname" placeholder="First Name" required />
                           </div>

                           <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                               <input type="name" class="input-common" name="lname" placeholder="Last Name">
                           </div>
                           <div class="col-lg-offset-2 col-md-offset-2"></div>
                       </div>
                       <div class="row input-row-common">
                           <div class="col-lg-offset-2 col-lg-4 col-md-offset-2 col-md-4 col-sm-12 col-xs-12">
                               <input type="name" class="input-common" name="phone" id="phone" placeholder="Number" required />
                           </div>

                           <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                               <input type="email" class="input-common" name="mail" placeholder="Email ID" required />
                           </div>
                           <div class="col-lg-offset-2 col-md-offset-2"></div>
                       </div>

                       <div class="row input-row-common">
                           <div class="col-lg-offset-2 col-lg-8 col-md-offset-2 col-md-8 col-sm-12 col-xs-12">
                               <textarea placeholder="Message" name="message" class="input-txtarea" required /></textarea>
                           </div>
                           <div class="col-lg-offset-2 col-md-offset-2"></div>
                       </div>

                       <div class="row input-row-common">
                           <div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-12 col-xs-12">
                               <input type="submit" class="submit" value="send message" />
                           </div>
                           <div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-8"></div>
                       </div>
                   </form>

Answer 2

SubmitHandler is not working because there is a mistake in your code :

mail: {
   required: true,
   mail: true
},

it should be

mail: {
       required: true,
       email: true
    },

and try using alert in submitHandler i am sure you will get it, like

submitHandler: function (form) {
                    alert('submit');
                   return false;
               },

DEMO : http://jsfiddle.net/ACdtX/