Возврат false в первом из нескольких обработчиков представления формы

У меня есть два обработчика отправки, один из которых проверяет форму и один представляет форму:

// 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, и поэтому последующий обработчик submit в цепочке не должен вызываться. Однако, даже если проверка не выполняется, форма отправляется через ajax. Почему?

Ответ 1

Возврат false из обработчика событий является эквивалентом вызова как event.preventDefault(), так и event.stopPropagation(), то есть он предотвращает действие по умолчанию для события происходит, и оно останавливает событие, пузырящее дерево DOM. Он не останавливает выполнение других обработчиков одного и того же элемента.

Вам нужно вызвать метод event.stopImmediatePropagation(), который останавливает выполнение других обработчиков, связанных с тем же элементом, отмечая, что обработчики будут выполняются в том же порядке, в котором они связаны, поэтому вы (очевидно) должны сначала привязать ваш обработчик проверки.

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

Ответ 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
});

Ответ 3

Ваша логика неверна, что два обработчика разговаривают друг с другом. Используйте только один обработчик. Возвращайте false, если проверка не выполняется, отправляйте через ajax, если она не терпит неудачу.