我有一个表单。我想用jquery验证插件实时验证这个表单。完成表单的Validataion后我想通过ajax提交它。我希望通过它的id验证表单的每个字段。 到目前为止我已经这样做了:
<form id="booking-form" name="booking-form" method="post" class="form-horizontal">
<input type="text" id="firstname" value="" name="book[firstname]">
<input type="text" id="email" value="" name="book[email]">
<input type="text" id="contact" value="" name="book[contact]">
<input type="submit" id="submit-booking" class="btn btn-primary btn-large" value="Book Now"/>
在我的javascript函数中:
$(document).ready(function() {
$("#booking-form").validate({
rules: {
"book[firstname]": {
required: true
},
"book[email]": {
required: true,
email: true
},
"book[contact]": {
required: true
}
},
submitHandler: function (form) {
alert("fff");
var formData = $(form).serialize();
//alert(formData);
$.ajax({
url: "bs_client_function.php?action=new_b",
type: "post",
data: formData,
beforeSend: function () {
},
success: function (data) {
}
});
return false;
}
});
});
它没有用。没有验证错误显示在表单中,没有发送ajax请求。我如何克服这个问题?
提前谢谢。
答案 0 :(得分:2)
你有一些严重的问题......
1)绝对不需要将.validate()
放在点击处理程序中。它应该进入DOM就绪事件处理程序。为什么?因为.validate()
是初始化插件的方式,而不是测试表单的方法。一旦在表单上初始化插件,测试就会自动完成。
2)当规则在.validate()
内声明时,它们只能由字段name
分配,不是分配id
而不是由jQuery选择器分配。
3)你应该使用表单内部的按钮而不是链接。提交按钮由插件自动捕获。
4)你在第三个字段上错误拼写required
。
"#contact": {requred: true}
工作演示:http://jsfiddle.net/P5tVp/
$(document).ready(function () {
$("#booking-form").validate({
rules: {
"b[firstname]": {
required: true
},
"b[email]": {
required: true,
email: true
},
"book[contact]": {
required: true
}
},
submitHandler: function (form) {
var formData = $(form).serialize();
$.ajax({
url: "bs_client_function.php?action=new_b",
type: "post",
data: formData,
beforeSend: function () {
},
success: function (data) {
}
});
}
});
});