javascript - 验证不适用于提交

Question

我已经尝试使用 jquery.validate.min.js 进行表单验证。

当我单击提交按钮时，将显示带有红色边框的空白必填字段。问题是单击提交按钮时正在加载页面。

验证无效。不知道问题出在哪里。提前致谢。

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

看看这个答案

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>