JavaScript: подтверждение или отмена отправки формы

Быстрый ответ

Чтобы запросить подтверждение перед отправкой формы, добавьте обработчик событию onsubmit и воспользуйтесь диалоговым окном confirm:

document.querySelector('form').onsubmit = function() {
  return confirm('Вы действительно хотите отправить форму?');
};

Форма будет отправлена, если пользователь нажмёт OK. В противном случае, отправка формы будет отменена. Не забудьте заменить 'form' на нужный селектор.

Проверка на стороне клиента: как предотвратить ошибки

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

function validateForm() {
  // Здесь происходит проверка формы...
  // В случае обнаружения ошибок...
  if (!isValid) {
    alert('Обнаружены ошибки в форме.');
    return false;
  }
  // Если всё в порядке, выводим диалоговое окно с подтверждением отправки
  return confirm('Вы готовы отправить форму?');
}

document.querySelector('form').onsubmit = validateForm;

Функция validateForm проводит валидацию данных и информирует пользователя о результатах, а confirm вызывается только после успешной валидации.

Разнообразие ответственностей: валидация и подтверждение

Использование отдельных функций для валидации и запроса подтверждения делает код более ясным и лёгким для поддержки:

function hasValidationErrors(form) {
  // Проверяем валидность данных...
  // ...
  return false; // Возвращаем true при наличии ошибок
}

function confirmSubmission() {
  // Задаём критический вопрос!
  return confirm('Вы уверены, что хотите отправить форму?');
}

document.querySelector('form').onsubmit = function(event) {
  // Если обнаружены ошибки, сообщаем об этом...
  if (hasValidationErrors(this)) {
    alert('Пожалуйста, исправьте ошибки в форме.');
    event.preventDefault();
  }
  // Если пользователь отказывается от отправки...
  else if (!confirmSubmission()) {
    event.preventDefault();
  }
};

Такая структура кода улучшает его читабельность и масштабируемость.

Индивидуализация диалога: добавляем уникальности

Можно персонализировать подтверждение отправки формы, сделав его соответствующим контексту использования:

function confirmOrderSubmission() {
  // Предлагаем пересмотреть заказ!
  return confirm('Вы готовы подтвердить ваш заказ?');
}

Управление отправкой формы: полный контроль над событиями

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

function submitForm(form) {
  // Отправляем данные на сервер!
  if (confirmOrderSubmission()) {
    form.submit();  // В контексте обработчика используем this.form.submit()
  }
}

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();  // Меняем планы: отменяем стандартную отправку
  submitForm(this);        // Переходим к пользовательскому методу отправки
});

Повышение интерактивности: использование элементов ввода типа image

Добавление элементов ввода с типом image может значительно улучшить интерфейс и упростить работу пользователей с формой:

<input type="image" src="submit-button.png" onclick="return validateForm();" />

Такие элементы улучшают визуальное восприятие формы и сохраняют её функциональность.

Надёжность UX: тестирование и оптимизация

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

Визуализация

// Визуализируем в виде комикса:

Кадр 1: Пользователь заполняет форму 🖋️
Кадр 2: Нажимает кнопку «Отправить» 🎯
Кадр 3: Появляется диалоговое окно с запросом на подтверждение 🛑✨
Кадр 4: Выбор пользователя:
         – [Да] – Данные отправляются на сервер 🚀
         – [Нет] – Возврат к корректировке формы 🔄

Диалоговое окно предлагает пользователям выбор: смело отправить данные или вернуться к уточнению информации.

Полезные материалы

1. Window.confirm() – MDN Web Docs — Использование диалоговых окон подтверждения в JavaScript.
2. JavaScript Popup Boxes – w3schools — Обзор типов всплывающих окон в JavaScript, включая окна подтверждения.
3. Async/await – JavaScript.info — Основы асинхронного программирования в JavaScript.
4. HTMLFormElement: событие submit – MDN Web Docs — Работа с событиями форм в JavaScript.
5. Event.preventDefault() – MDN Web Docs — Как предотвратить стандартную отправку формы.
6. FormData – MDN Web Docs — Описание работы с данными формы в JavaScript.