requestSubmit() — программная отправка формы с сохранением нативного поведения!

В HTML-формах существует два разных подхода к программному запуску отправки. Метод submit() выполняет непосредственную отправку формы, но отличается от пользовательского сценария: он не запускает constraint validation и не генерирует событие submit.

const form = document.querySelector('form');

form.submit();

Если форма содержит обработчик submit, вызванный через submit(), он не будет выполнен. Это принципиальное отличие от реального действия пользователя через submit-кнопку.

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  console.log('Form submitted');
});

form.submit();

Для случаев, когда отправка инициируется js, но должна сохранить стандартную модель поведения HTML-форм, используется метод requestSubmit().

form.requestSubmit();

requestSubmit() запускает стандартный алгоритм отправки формы: браузер выполняет встроенную constraint validation, а после успешной проверки генерирует событие submit.

Рассмотрим форму с обязательным email-полем. Если значение отсутствует или не проходит проверку типа email, обработчик submit вызван не будет, поскольку браузер остановит процесс на этапе валидации.

<form id="profile">
  <input
    name="email"
    type="email"
    required
  >

  <button type="submit">
    Save
  </button>
</form>

После регистрации обработчика отправку можно инициировать программно, сохранив обычное поведение формы.

const form = document.querySelector('#profile');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const data = new FormData(form);

  console.log(Object.fromEntries(data));
});

form.requestSubmit();

В отличие от submit(), метод requestSubmit() также позволяет передать конкретную submit-кнопку. Это важно для форм, где разные кнопки отправки имеют собственные параметры или меняют поведение отправки.

const saveButton = form.querySelector('.save');

form.requestSubmit(saveButton);

Переданная кнопка должна быть submit-элементом, связанным с этой формой. В этом случае учитываются такие параметры кнопки, как name, value, formaction, formenctype, formmethod и другие submit-настройки.

<form id="actions">
  <input name="title" value="Example">

  <button
    class="save"
    type="submit"
    name="action"
    value="save"
  >
    Save
  </button>
</form>

В реальном приложении выбор конкретной submit-кнопки позволяет управлять поведением одной формы из разных сценариев отправки, сохраняя стандартную обработку браузера.

const form = document.querySelector('#actions');
const saveButton = form.querySelector('.save');

form.requestSubmit(saveButton);

На практике requestSubmit() применяется, когда действие пользователя необходимо инициировать из js, но при этом требуется сохранить полный жизненный цикл HTML-формы: валидацию браузера, событие submit и стандартную обработку submit-кнопки.

🔥 form.submit() и form.requestSubmit() решают разные задачи. Первый вариант выполняет прямую отправку без validation и события submit, второй запускает полноценный процесс отправки, максимально близкий к пользовательскому взаимодействию с формой. Если программная отправка должна работать так же, как обычное нажатие submit-кнопки, используйте requestSubmit().

📣 Code Ready | #практика