CODEWITHSUNDEEP
javascriptjqueryhtml
Prasath V
Prasath V

Reputation: 1356

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="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>

Upvotes: 3

Views: 3125

Answers (4)

Sasi
Sasi

Reputation: 465

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>

Upvotes: 4

Harshil Dave
Harshil Dave

Reputation: 490

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/

Upvotes: 1

Sagar Arora
Sagar Arora

Reputation: 1773

Please use the following code and try.

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




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

Upvotes: 0

Sajib Khan
Sajib Khan

Reputation: 24146

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

Upvotes: 0

Related Questions