我有两个提交处理程序,一个验证一个表单,一个提交表单：
// validates the form but does not submit it
$("form").submit(function() {
// perform validation here and set "validationFails" appropriately
// ...
if (validationFails) {
return false;
}
});
// submits the form via ajax
$("form").submit(function(event) {
event.preventDefault();
// submit the form via ajax here
// ...
});
如果验证失败,似乎不能通过ajax提交表单,因为使用return false,因此链中的后续提交处理程序不应被调用.但是,即使验证失败,表单也是通过ajax提交的.为什么？
解决方法
从事件处理程序返回false相当于调用event.preventDefault()和
event.stopPropagation(),也就是阻止事件发生的默认操作,并阻止事件冒泡起来.它不会阻止运行中相同元素的其他处理程序.
您需要调用event.stopImmediatePropagation() method – 停止绑定到相同元素的其他处理程序运行,并指出处理程序将以与它们绑定的相同顺序运行,因此(显然)必须首先绑定验证处理程序.
$("form").submit(function(event) {
// perform validation here and set "validationFails" appropriately
// ...
if (validationFails) {
event.stopImmediatePropagation();
return false;
}
});