requestSubmit(): отправка формы с нативной проверкой

Назначение

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

Как это работает

В локальном документе создайте form id lesson-form с обязательным полем и submit-кнопкой id send-lesson с name="action". Отдельная кнопка id trigger-submit должна иметь type="button". Пример перехватывает отправку и никуда данные не передаёт.

Пример

const form = document.querySelector("#lesson-form");
const submitter = document.querySelector("#send-lesson");
const trigger = document.querySelector("#trigger-submit");
form.addEventListener("submit", event => {
  event.preventDefault();
  console.log("Проверка пройдена, инициатор:", event.submitter?.name);
});
trigger.addEventListener("click", () => form.requestSubmit(submitter));

Что должно получиться

Пустое обязательное поле препятствует обычной отправке. После корректного заполнения срабатывает submit, а event.submitter указывает на переданную кнопку. В примере preventDefault останавливает сетевое действие.

Граница применения и частая ошибка

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

Самостоятельная проверка

Проверьте пустое и заполненное поле. Добавьте вторую кнопку отправки и сравните submitter. Отдельно оцените novalidate и formnovalidate в своей копии, не используя их для обхода обязательной серверной проверки.

Связанные материалы

• Кеширование HTTP
• Заголовки запросов и ответов
• Диагностика