javascript - Validation not working on submit

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=".1.1/jquery.min.js"></script>
<script src=".validate/1.11.1/jquery.validate.min.js"></script>
<form class="submit-form" method="post">
                        <div class="row input-row-mon">
                            <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-mon 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-mon" name="lname" placeholder="Last Name">
                            </div>
                            <div class="col-lg-offset-2 col-md-offset-2"></div>
                        </div>
                        <div class="row input-row-mon">
                            <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-mon" 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-mon" name="mail" placeholder="Email ID">
                            </div>
                            <div class="col-lg-offset-2 col-md-offset-2"></div>
                        </div>

                        <div class="row input-row-mon">
                            <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-mon">
                            <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>

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn./ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form class="submit-form" method="post">
                        <div class="row input-row-mon">
                            <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-mon 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-mon" name="lname" placeholder="Last Name">
                            </div>
                            <div class="col-lg-offset-2 col-md-offset-2"></div>
                        </div>
                        <div class="row input-row-mon">
                            <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-mon" 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-mon" name="mail" placeholder="Email ID">
                            </div>
                            <div class="col-lg-offset-2 col-md-offset-2"></div>
                        </div>

                        <div class="row input-row-mon">
                            <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-mon">
                            <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>

Share Improve this question asked Feb 18, 2017 at 5:30 Prasath V 1,3465 gold badges20 silver badges39 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 4

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn./ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

<form id="submit-form" method="post">
                       <div class="row input-row-mon">
                           <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-mon 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-mon" name="lname" placeholder="Last Name">
                           </div>
                           <div class="col-lg-offset-2 col-md-offset-2"></div>
                       </div>
                       <div class="row input-row-mon">
                           <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-mon" 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-mon" name="mail" placeholder="Email ID" required />
                           </div>
                           <div class="col-lg-offset-2 col-md-offset-2"></div>
                       </div>

                       <div class="row input-row-mon">
                           <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-mon">
                           <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>

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/ACdtX/

Try adding preventDefault() to prevent automatic page loading while form submitting.

$(".submit-form").submit(function(e) {

    console.log("> I am e.preventDefault ");
    e.preventDefault();                     # add this line

    }).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) {
               console.log(" In submitHandler!!");  # to make sure code is executing

               var postData = $(form).serializeArray();
               var result = {};
               $.each(postData, function () {
                   result[this.name] = this.value;
               });
               return false;
           },
           invalidHandler: function (form, validator) {

               console.log(">>> In invalidHandler!!");    # add this line

               $('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;
           }
       });

Please use the following code and try.

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

        <form class="submit-form" method="post">
                    <div class="row input-row-mon">
                        <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-mon 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-mon" name="lname" placeholder="Last Name">
                        </div>
                        <div class="col-lg-offset-2 col-md-offset-2"></div>
                    </div>
                    <div class="row input-row-mon">
                        <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-mon" 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-mon" name="mail" placeholder="Email ID">
                        </div>
                        <div class="col-lg-offset-2 col-md-offset-2"></div>
                    </div>

                    <div class="row input-row-mon">
                        <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-mon">
                        <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>




                <script>
                    jQuery(".submit-form").validate({
                           rules: {
                               fname: {
                                   required: true,
                               },
                               lname: {
                                   required: true,
                               },
                               phone: {
                                   required: true,
                               },
                               mail: {
                                   required: true,
                                   email: true
                               },
                               subjct: {
                                   required: true,
                               },
                               message: {
                                   required: true,
                               },
                           },
                           submitHandler: function (form) {
                               /*var postData = $(form).serializeArray();
                               console.log("psots data  using ajax or normal submit"+postData);*/

                               form.submit();
                           },
                       });
                </script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Validation not working on submit - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)