jQuery验证不起作用，控制台中没有错误

Question

I have a form to submit property details, I use the jquery validation library. I need to validate the form with the jquery validation library and send the values to my php file called submit-property-data.php for inserting into my database.

Once i click the submit button I can't see any validation errors also no errors in console.

I want to validate the form first and send the data to my php file to process the values.

 $('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

It's not working because your form does not contain a type="submit" button or input . The plugin automatically captures the submit button as long as it's the correct type . Since your submit button is a type="button" , it's completely ignored.

Simply change type into "submit" and your demo works.

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

---

Alternatively for whatever reason, if you want a type="button" or use some other trigger, you'll need to write a click handler that calls the .valid() method...

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

DEMO 2 : jsfiddle.net/5ytjakvz/1/

For newer versions of jQuery, use the .on() method...

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

Answer 2

I see a couple of issues:

1. You're using an old version of jquery.

2. You should add a event trigger to check when the form is submitted, like this:

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

From jQuery 1.7 you can use 'on' instead

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

3. Finally, use the valid() method to check if the form is valid before running the submitPropertyForm() function:

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