Почему функция отправки формы вызывается только один раз? - PullRequest
Новая
       9

Почему функция отправки формы вызывается только один раз?

0 голосов
/ 03 ноября 2019

Почти то, что написано на банке. Этот фрагмент демонстрирует проблему: 

function check(e) {
  console.log($('input[name="myinput"]').val());
  if ($('input[name="myinput"]').val() == "123") {
    return true;
  } else {
    $('input[name="myinput"]')[0].setCustomValidity("Invalid");
    return false;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <form onsubmit="return check()">
    <input name="myinput">
    <input type="submit">
  </form>
</div>

Когда форма загрузится, введите 1 в поле ввода и отправьте форму. Сбой при отправке, поскольку значение поля ввода не было 123, а значение "1" зарегистрировано в консоли. Теперь измените значение на что-нибудь еще и повторно отправьте форму;в консоли нет лишней строки, и валидность формы «Недопустимо» сохраняется, даже если введено значение 123.

Почему обработчик onsubmit вызывается только один раз?

1 Ответ

1 голос
/ 03 ноября 2019

Поскольку форма в «недопустимом» состоянии (поскольку вход внутри формы находится в «недопустимом» состоянии) не будет отправлена.

Срок действия формы создан, чтобы его нельзя было изменить в событиях submitпотому что, как вы заметили, вы не получите новых submit. Вы должны изменить срок действия формы перед ее отправкой. Обычно валидность формы проверяется индивидуально на каждом входе. Отсюда на ваш вкус. Я бы порекомендовал проверить достоверность каждого ввода на blur: 

$('input[name="myinput"]').on("blur", () => {
    // Do your checks and setCustomValidity depending on if is valid or not
});

Таким образом, вы получите событие submit, только если все входы действительны. Кстати, для того, чтобы это работало, вы должны установить все входы в недопустимое состояние при запуске, чтобы избежать пустых отправок, не касаясь какого-либо ввода.

Другим способом может быть отключение кнопки отправки, если все входы пусты,Для этого вам также потребуется JavaScript и проверка событий change или input на всех входах.

...