我有一个表单来提交属性详细信息，我使用了jQuery验证库。 我需要使用jquery验证库来验证表单，然后将值发送到名为commit-property-data.php的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> 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(' 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>
答案 0 :(得分：0)
它不起作用，因为您的表单不包含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> 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(' 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处理程序，该处理程序调用{{1}}方法...
.valid()对于jQuery的 版本，请使用$("#submit-button").click(function() {
$("#property-form").valid(); // trigger validation programmatically
});
方法...
.on()答案 1 :(得分：-1)
我看到几个问题：
您正在使用旧版本的jquery。
您应该添加一个事件触发器，以检查何时提交表单，如下所示：
$("#submit-button").bind('click', function() {... }
从jQuery 1.7开始，您可以改用'on'
$("#submit-button").on('click', function() {... }
if ( $("#property-form").valid() ) {
submitPropertyForm();
} else {
console.log('form invalid');
}
})