Question

我有两个提交处理程序，一个验证表单，另一个提交表单：

// 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
  // ...
});

如果由于使用了return false验证失败，似乎不应该通过ajax提交表单，因此不应该调用链中的后续submit处理程序。但是，即使验证失败，表单也会通过ajax提交。为什么呢？

Answer 1

从事件处理程序返回false相当于同时调用event.preventDefault()和event.stopPropagation()，也就是说，它会阻止事件的默认操作发生并停止事件冒泡DOM树。不阻止同一元素上的其他处理程序运行。

你需要调用event.stopImmediatePropagation() method - 阻止绑定到同一元素的其他处理程序运行，注意处理程序将以它们绑定的相同顺序运行，因此你（显然）必须绑定你的验证处理程序第一。

$("form").submit(function(event) {
  // perform validation here and set "validationFails" appropriately
  // ...
  if (validationFails) {
      event.stopImmediatePropagation();
      return false;
  }
});

Answer 2

您在第二个event处理程序中缺少submit参数，并且还需要在验证失败时停止来自第一个submit处理程序的事件传播。

$("form").submit(function(event) {
  // validate...
  if (validationFails) {
      event.stopPropagation();
      return false;
  }
});

$("form").submit(function(event) {
      event.preventDefault();
     // submit the form via ajax
});

Answer 3

2个处理程序正在相互通信，你的逻辑是不正确的。只使用一个处理程序。如果验证失败则返回false，如果没有失败则通过ajax提交

在多个表单提交处理程序的第一个中返回false

3 个答案: