jQuery 验证无效，控制台中没有错误

Question

我有一个表单可以提交属性详细信息，我使用 jquery 验证库。我需要使用 jquery 验证库验证表单并将值发送到我的 php 文件，名为 submit-属性-data.php 以插入到我的数据库中。

单击提交按钮后，我看不到任何验证错误，控制台中也没有错误。

我想先验证表单并将数据发送到我的 php 文件以处理这些值。

$('document').ready(function() {
  $("#notification").hide();

  /* handling form validation */
  $("#property-form").validate({
    rules: {
      prop_title: "required",
      prop_price: {
        required: true,
        digits: true
        },
      prop_area: {
        required: true,
        digits: true
      },
      prop_address: "required",
      prop_message: {
        required: true,
        minlength: 10,
        maxlength: 2000
      },
      prop_owner_name: "required",
      prop_owner_email: {
        required: true,
        email: true
      },
      prop_owner_phone: {
        required: true,
        digits: true
      },
    },
    messages: {
      'prop_title': {
        required: "Please enter title for your property"
      },
      prop_price: {
        required: "Please enter price of your property",
        digits: "Please enter price in digits (AED)"
      },
      prop_area: "Please enter Sqft of your property",
      prop_address: "Please enter address of your property",
      prop_message: {
        required: "Please enter detailed Information",
        minlength: "Please enter something about your property in 50 - 20000 characters",
        maxlength: "Please enter something about your property in 50 - 20000 characters"
      },
    },
    submitHandler: submitPropertyForm
  });
  
  /* Handling login functionality */
  function submitPropertyForm() {
    var data = $("#property-form").serialize();
    $.ajax({
      type: 'POST',
      url: 'submit_property_data.php',
      data: data,
      beforeSend: function() {
        $("#submit-button").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; sendving ...');
      },
      success: function(response) {
        if (response == "ok") {
          console.log(1);
          document.getElementById("contact-form").reset();
          $("#notification").html('<b> ' + response + ' !</b>').show();
          //setTimeout(' window.location.href = "dashboard.php"; ',4000);
        } else {
          $("#notification").fadeIn(1000, function() {
            $("#notification").html('<b>' + response + ' !</b>').fadeOut();
            $("#submit-button").html('&nbsp; Send');
          });
        }
      }
    });
    return false;
  }
});

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

<div class="content-area-7 submit-property">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <!-- <div id="error_message" class="notification-box"></div> -->
      </div>
      <div id="notification" class="notification-box"></div>
      <div class="col-md-12">
        <div class="submit-address">
          <form name="property-form" method="post" id="property-form">
            <div class="main-title-2">
              <h1><span>Tell Me</span> Something About Your Property</h1>
            </div>
            <div class="search-contents-sidebar mb-30">
              <div class="form-group">
                <label>Property Title</label>
                <input class="input-text" name="prop_title" id="prop_title" placeholder="Property Title">
              </div>
              <div class="row">
                <div class="col-md-6 col-sm-6">
                  <div class="form-group">
                    <label>Status</label>
                    <select class="selectpicker search-fields" id="prop_status" name="prop_status">
                      <option value="Sale">For Sale</option>
                      <option value="Rent">For Rent</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-6 col-sm-6">
                  <div class="form-group">
                    <label>Type</label>
                    <select class="selectpicker search-fields" id="prop_title" name="prop_type">
                      <option value="Modern">Modern</option>
                      <option value="Traditional">Traditional</option>
                      <option value="Arabic">Arabic</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-3 col-sm-6">
                  <div class="form-group">
                    <label>Price (Dirham)</label>
                    <input class="input-text" name="prop_price" id="prop_price" placeholder="AED">
                  </div>
                </div>
                <div class="col-md-3 col-sm-6">
                  <div class="form-group">
                    <label>Sqft</label>
                    <input class="input-text" name="prop_area" id="prop_area" placeholder="SqFt">
                  </div>
                </div>
                <div class="col-md-3 col-sm-6">
                  <div class="form-group">
                    <label>Bed Rooms</label>
                    <select class="selectpicker search-fields" name="prop_rooms" id="prop_rooms">
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                    </select>
                  </div>
                </div>
                <!-- <div class="col-md-3 col-sm-6">
                  <div class="form-group">
                      <label>Bathroom</label>
                      <select class="selectpicker search-fields" name="1">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                          <option>6</option>
                      </select>
                    </div>
                </div> -->
              </div>
            </div>
            <div class="main-title-2">
              <h1><span>Location</span></h1>
            </div>
            <div class="row mb-30 ">
              <div class="col-md-6 col-sm-6">
                <div class="form-group">
                  <label>Address</label>
                  <input class="input-text" id="prop_address" name="prop_address" placeholder="Address">
                </div>
              </div>
            </div>
            <div class="main-title-2">
              <h1><span>Upload</span> Photos Of Villa </h1>
            </div>
            <div id="myDropzone" class="dropzone dropzone-design mb-10">
              <div class="dz-default dz-message" data=""><span>Drop files here to upload</span></div>
            </div>
            <div class="main-title-2">
              <h1><span>Detailed</span> Information</h1>
            </div>
            <div class="row mb-30">
              <div class="col-md-12">
                <div class="form-group">
                  <textarea class="input-text" id="prop_message" name="prop_message" placeholder="Detailed Information"></textarea>
                </div>
              </div>
            </div>
            <!--<div class="row mb-30">
              <div class="col-md-4 col-sm-4">
                  <div class="form-group">
                      <label>Building Age <span>(optional)</span></label>
                      <select class="selectpicker search-fields" name="years">
                          <option>0-1 Years</option>
                          <option>0-5 Years</option>
                          <option>0-10 Years</option>
                          <option>0-20 Years</option>
                          <option>0-40 Years</option>
                          <option>40+Years</option>
                      </select>
                  </div>
              </div>
              <div class="col-md-4 col-sm-4">
                  <div class="form-group">
                      <label>Bedrooms (optional)</label>
                      <select class="selectpicker search-fields" name="1">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                          <option>6</option>
                      </select>
                  </div>
              </div>
              <div class="col-md-4 col-sm-4">
                  <div class="form-group">
                      <label>Bathrooms (optional)</label>
                      <select class="selectpicker search-fields" name="1">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                          <option>6</option>
                      </select>
                  </div>
              </div>

              <div class="col-lg-12">
                  <label class="margin-t-10">Features (optional)</label>
                  <div class="row">
                      <div class="col-lg-4 col-sm-4 col-xs-12">
                          <div class="checkbox checkbox-theme checkbox-circle">
                              <input id="opt_parking" name="opt_parking" value="1" type="checkbox">
                              <label for="checkbox1">
                                  Free Parking
                              </label>
                          </div>
                          <div class="checkbox checkbox-theme checkbox-circle">
                              <input id="opt_air_condition" name="opt_air_condition" value="1" type="checkbox">
                              <label for="checkbox2">
                                  Air Condition
                              </label>
                          </div>
                          <div class="checkbox checkbox-theme checkbox-circle">
                              <input id="opt_seat" name="opt_seat" value="1" type="checkbox">
                              <label for="checkbox3">
                                  Places to seat
                              </label>
                          </div>
                      </div>
                      <div class="col-lg-4 col-sm-4 col-xs-12">
                          <div class="checkbox checkbox-theme checkbox-circle">
                              <input id="opt_swimming" name="opt_swimming" value="1" type="checkbox">
                              <label for="checkbox4">
                                  Swimming Pool
                              </label>
                          </div>
                          <div class="checkbox checkbox-theme checkbox-circle">
                              <input id="opt_laundary" name="opt_laundary" value="1" type="checkbox">
                              <label for="checkbox5">
                                  Laundry Room
                              </label>
                          </div>
                          <div class="checkbox checkbox-theme checkbox-circle">
                              <input id="opt_window_covering" name="opt_window_covering" value="1" type="checkbox">
                              <label for="checkbox6">
                                  Window Covering
                              </label>
                          </div>
                      </div>
                      <div class="col-lg-4 col-sm-4 col-xs-12">
                          <div class="checkbox checkbox-theme checkbox-circle">
                              <input id="opt_parking" name="opt_parking" value="1" type="checkbox">
                              <label for="checkbox7">
                                  Central Heating
                              </label>
                          </div>
                            <div class="checkbox checkbox-theme checkbox-circle">
                              <input id="checkbox8" type="checkbox">
                              <label for="checkbox8">
                                  Alarm
                              </label>
                          </div>
                      </div>
                  </div>
              </div>
            </div>-->
            <div class="main-title-2">
              <h1><span>Contact</span> Details</h1>
            </div>
            <div class="row">
              <div class="col-md-4 col-sm-4">
                <div class="form-group">
                  <label>Name</label>
                  <input class="input-text" name="prop_owner_name" id="prop_owner_name" placeholder="Name">
                </div>
              </div>
              <div class="col-md-4 col-sm-4">
                <div class="form-group">
                  <label>Email</label>
                  <input class="input-text" name="prop_owner_email" id="prop_owner_email" placeholder="Email">
                </div>
              </div>
              <div class="col-md-4 col-sm-4">
                <div class="form-group">
                  <label>Contact No</label>
                  <input class="input-text" name="prop_owner_phone" id="prop_owner_phone" placeholder="Phone">
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <button type="button" name="submit-button" id="submit-button">Submit</button>
            </div>
        </div>
        </form>
      </div>
    </div>
  </div>
</div>
</div>

Answer 1

我发现了几个问题：

您使用的是旧版本 jquery。
您应该添加一个事件触发器来检查何时提交表单，如下所示：

$("#submit-button").bind('click', function() {... }

从 jQuery 1.7 开始，您可以改用 'on'

$("#submit-button").on('click', function() {... }

最后，在运行 submitPropertyForm() 函数之前使用 valid() 方法检查表单是否有效：

if ( $("#property-form").valid() ) {
        submitPropertyForm();
    } else {
        console.log('form invalid');
    }
})

Answer 2

它不起作用，因为您的表单不包含 type="submit" button 或 input。该插件会自动捕获 submit 按钮，只要它是正确的 type。由于您的提交按钮是 type="button"，因此它被完全忽略了。

只需将 type 更改为 "submit"，您的演示就可以运行了。

<button type="submit" ....

$('document').ready(function() {
  $("#notification").hide();

  /* handling form validation */
  $("#property-form").validate({
    rules: {
      prop_title: "required",
      prop_price: {
        required: true,
        digits: true
        },
      prop_area: {
        required: true,
        digits: true
      },
      prop_address: "required",
      prop_message: {
        required: true,
        minlength: 10,
        maxlength: 2000
      },
      prop_owner_name: "required",
      prop_owner_email: {
        required: true,
        email: true
      },
      prop_owner_phone: {
        required: true,
        digits: true
      },
    },
    messages: {
      'prop_title': {
        required: "Please enter title for your property"
      },
      prop_price: {
        required: "Please enter price of your property",
        digits: "Please enter price in digits (AED)"
      },
      prop_area: "Please enter Sqft of your property",
      prop_address: "Please enter address of your property",
      prop_message: {
        required: "Please enter detailed Information",
        minlength: "Please enter something about your property in 50 - 20000 characters",
        maxlength: "Please enter something about your property in 50 - 20000 characters"
      },
    },
    submitHandler: submitPropertyForm
  });
  
  /* Handling login functionality */
  function submitPropertyForm() {
    var data = $("#property-form").serialize();
    $.ajax({
      type: 'POST',
      url: 'submit_property_data.php',
      data: data,
      beforeSend: function() {
        $("#submit-button").html('<span class="glyphicon glyphicon-transfer"></span> &nbsp; sendving ...');
      },
      success: function(response) {
        if (response == "ok") {
          console.log(1);
          document.getElementById("contact-form").reset();
          $("#notification").html('<b> ' + response + ' !</b>').show();
          //setTimeout(' window.location.href = "dashboard.php"; ',4000);
        } else {
          $("#notification").fadeIn(1000, function() {
            $("#notification").html('<b>' + response + ' !</b>').fadeOut();
            $("#submit-button").html('&nbsp; Send');
          });
        }
      }
    });
    return false;
  }
});

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

<div class="content-area-7 submit-property">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <!-- <div id="error_message" class="notification-box"></div> -->
      </div>
      <div id="notification" class="notification-box"></div>
      <div class="col-md-12">
        <div class="submit-address">
          <form name="property-form" method="post" id="property-form">
            <div class="main-title-2">
              <h1><span>Tell Me</span> Something About Your Property</h1>
            </div>
            <div class="search-contents-sidebar mb-30">
              <div class="form-group">
                <label>Property Title</label>
                <input class="input-text" name="prop_title" id="prop_title" placeholder="Property Title">
              </div>
              <div class="row">
                <div class="col-md-6 col-sm-6">
                  <div class="form-group">
                    <label>Status</label>
                    <select class="selectpicker search-fields" id="prop_status" name="prop_status">
                      <option value="Sale">For Sale</option>
                      <option value="Rent">For Rent</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-6 col-sm-6">
                  <div class="form-group">
                    <label>Type</label>
                    <select class="selectpicker search-fields" id="prop_title" name="prop_type">
                      <option value="Modern">Modern</option>
                      <option value="Traditional">Traditional</option>
                      <option value="Arabic">Arabic</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-3 col-sm-6">
                  <div class="form-group">
                    <label>Price (Dirham)</label>
                    <input class="input-text" name="prop_price" id="prop_price" placeholder="AED">
                  </div>
                </div>
                <div class="col-md-3 col-sm-6">
                  <div class="form-group">
                    <label>Sqft</label>
                    <input class="input-text" name="prop_area" id="prop_area" placeholder="SqFt">
                  </div>
                </div>
                <div class="col-md-3 col-sm-6">
                  <div class="form-group">
                    <label>Bed Rooms</label>
                    <select class="selectpicker search-fields" name="prop_rooms" id="prop_rooms">
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                    </select>
                  </div>
                </div>
                <!-- <div class="col-md-3 col-sm-6">
                  <div class="form-group">
                      <label>Bathroom</label>
                      <select class="selectpicker search-fields" name="1">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                          <option>6</option>
                      </select>
                    </div>
                </div> -->
              </div>
            </div>
            <div class="main-title-2">
              <h1><span>Location</span></h1>
            </div>
            <div class="row mb-30 ">
              <div class="col-md-6 col-sm-6">
                <div class="form-group">
                  <label>Address</label>
                  <input class="input-text" id="prop_address" name="prop_address" placeholder="Address">
                </div>
              </div>
            </div>
            <div class="main-title-2">
              <h1><span>Upload</span> Photos Of Villa </h1>
            </div>
            <div id="myDropzone" class="dropzone dropzone-design mb-10">
              <div class="dz-default dz-message" data=""><span>Drop files here to upload</span></div>
            </div>
            <div class="main-title-2">
              <h1><span>Detailed</span> Information</h1>
            </div>
            <div class="row mb-30">
              <div class="col-md-12">
                <div class="form-group">
                  <textarea class="input-text" id="prop_message" name="prop_message" placeholder="Detailed Information"></textarea>
                </div>
              </div>
            </div>
            <!--<div class="row mb-30">
              <div class="col-md-4 col-sm-4">
                  <div class="form-group">
                      <label>Building Age <span>(optional)</span></label>
                      <select class="selectpicker search-fields" name="years">
                          <option>0-1 Years</option>
                          <option>0-5 Years</option>
                          <option>0-10 Years</option>
                          <option>0-20 Years</option>
                          <option>0-40 Years</option>
                          <option>40+Years</option>
                      </select>
                  </div>
              </div>
              <div class="col-md-4 col-sm-4">
                  <div class="form-group">
                      <label>Bedrooms (optional)</label>
                      <select class="selectpicker search-fields" name="1">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                          <option>6</option>
                      </select>
                  </div>
              </div>
              <div class="col-md-4 col-sm-4">
                  <div class="form-group">
                      <label>Bathrooms (optional)</label>
                      <select class="selectpicker search-fields" name="1">
                          <option>1</option>
                          <option>2</option>
                          <option>3</option>
                          <option>4</option>
                          <option>5</option>
                          <option>6</option>
                      </select>
                  </div>
              </div>

              <div class="col-lg-12">
                  <label class="margin-t-10">Features (optional)</label>
                  <div class="row">
                      <div class="col-lg-4 col-sm-4 col-xs-12">
                          <div class="checkbox checkbox-theme checkbox-circle">
                              <input id="opt_parking" name="opt_parking" value="1" type="checkbox">
                              <label for="checkbox1">
                                  Free Parking
                              </label>
                          </div>
                          <div class="checkbox checkbox-theme checkbox-circle">
                              <input id="opt_air_condition" name="opt_air_condition" value="1" type="checkbox">
                              <label for="checkbox2">
                                  Air Condition
                              </label>
                          </div>
                          <div class="checkbox checkbox-theme checkbox-circle">
                              <input id="opt_seat" name="opt_seat" value="1" type="checkbox">
                              <label for="checkbox3">
                                  Places to seat
                              </label>
                          </div>
                      </div>
                      <div class="col-lg-4 col-sm-4 col-xs-12">
                          <div class="checkbox checkbox-theme checkbox-circle">
                              <input id="opt_swimming" name="opt_swimming" value="1" type="checkbox">
                              <label for="checkbox4">
                                  Swimming Pool
                              </label>
                          </div>
                          <div class="checkbox checkbox-theme checkbox-circle">
                              <input id="opt_laundary" name="opt_laundary" value="1" type="checkbox">
                              <label for="checkbox5">
                                  Laundry Room
                              </label>
                          </div>
                          <div class="checkbox checkbox-theme checkbox-circle">
                              <input id="opt_window_covering" name="opt_window_covering" value="1" type="checkbox">
                              <label for="checkbox6">
                                  Window Covering
                              </label>
                          </div>
                      </div>
                      <div class="col-lg-4 col-sm-4 col-xs-12">
                          <div class="checkbox checkbox-theme checkbox-circle">
                              <input id="opt_parking" name="opt_parking" value="1" type="checkbox">
                              <label for="checkbox7">
                                  Central Heating
                              </label>
                          </div>
                            <div class="checkbox checkbox-theme checkbox-circle">
                              <input id="checkbox8" type="checkbox">
                              <label for="checkbox8">
                                  Alarm
                              </label>
                          </div>
                      </div>
                  </div>
              </div>
            </div>-->
            <div class="main-title-2">
              <h1><span>Contact</span> Details</h1>
            </div>
            <div class="row">
              <div class="col-md-4 col-sm-4">
                <div class="form-group">
                  <label>Name</label>
                  <input class="input-text" name="prop_owner_name" id="prop_owner_name" placeholder="Name">
                </div>
              </div>
              <div class="col-md-4 col-sm-4">
                <div class="form-group">
                  <label>Email</label>
                  <input class="input-text" name="prop_owner_email" id="prop_owner_email" placeholder="Email">
                </div>
              </div>
              <div class="col-md-4 col-sm-4">
                <div class="form-group">
                  <label>Contact No</label>
                  <input class="input-text" name="prop_owner_phone" id="prop_owner_phone" placeholder="Phone">
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <button type="submit" name="submit-button" id="submit-button">Submit</button>
            </div>
        </div>
        </form>
      </div>
    </div>
  </div>
</div>
</div>

或者无论出于何种原因，如果您想要 type="button" 或使用其他触发器，您需要编写一个 click 处理程序来调用 .valid() 方法...

$("#submit-button").click(function() {
    $("#property-form").valid(); // trigger validation programmatically 
});

演示 2: jsfiddle.net/5ytjakvz/1/

对于 更新的 版本的 jQuery，使用 .on() 方法...

$("#submit-button").on('click', function() { ....

jQuery 验证无效，控制台中没有错误

jQuery Validation not working, No errors in console

javascript

jquery

jquery-validate