我在表单中使用jquery验证。我没有遇到太多问题,但我在用户表单中遇到了一个问题,jquery编号验证没有启动。我在IE、firefox和chrome中测试了它,但它在任何一个中都不起作用。奇怪的是,到目前为止,它似乎是特定于这个用户的表单的,因为当我转到其他用户表单时,警报会像我在所有浏览器上测试时一样发出。我想知道以前是否有其他人在使用jquery验证时遇到过这个问题。下面是我正在使用的一些jquery验证代码的示例。
var validator = $("#educationForm").validate({
debug: true,
errorElement: "span",
errorClass: "help-block errortext",
errorPlacement: function (error, element) {
element.before(error);
},
success: function (label) {
label.remove();
},
rules: {
school1GPA: {
number: true
},
school2GPA: {
number: true
},
school1Units: {
number: true
},
school2Units: {
number: true
},
},
onsubmit: false
});
$('.form-actions').on('click', '#btnSubmit', function (evt) {
evt.preventDefault();
if ($("#educationForm").valid()) {
$.ajax({
type: "POST",............
} else {
validator.focusInvalid();
}
});
问题是在触发jquery
验证之前就触发了evt.preventDefault()
。这基本上扼杀了evt.preventDefault()
之后的任何验证语句。您只需要拨打$("#educationForm").valid()
或jquery.validate()
,然后再拨打evt.preventDefault()
。
$('.form-actions').on('click', '#btnSubmit', function (evt) {
if ($("#educationForm").valid()) {
evt.preventDefault(); // prevents the form submission to allow ajax
$.ajax({
type: "POST",............
} else {
validator.focusInvalid();
}
});
-
您根本不应该需要
click
处理程序。根据文档,您的ajax属于submitHandler
回调函数的内部。 -
您也不应该将
onsubmit
设置为false
,除非您希望在单击提交按钮时阻止验证。 -
debug
设置为true
将阻止表单的提交。
更像这样的。。。
var validator = $("#educationForm").validate({
// debug: true, // <- this is blocking the submit entirely
submitHandler: function(form) {
// your ajax here
$.ajax(...);
return false;
},
errorElement: "span",
errorClass: "help-block errortext",
errorPlacement: function (error, element) {
element.before(error);
},
success: function (label) {
label.remove();
},
rules: {
school1GPA: {
number: true
},
school2GPA: {
number: true
},
school1Units: {
number: true
},
school2Units: {
number: true
},
},
// onsubmit: false // <- this is preventing validation on the submit.
});
演示:http://jsfiddle.net/2vv8vL79/