Выполняем действие перед отправкой формы: jQuery, JavaScript

Пройдите тест, узнайте какой профессии подходите
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

Вы можете прервать отправку формы, использовав обработчик событий в JavaScript. Для временной остановки отправки, воспользуйтесь методом event.preventDefault() в функции-обработчике. После выполнения необходимых проверок и манипуляций возобновите отправку формы с помощью this.submit(). Вот образец кода:

JS
Скопировать код
document.querySelector('#myform').addEventListener('submit', function(event) {
    event.preventDefault(); // Подождите, не отправляем форму ещё
    // Выполняем необходимые действия перед отправкой
    // После этого продолжаем отправку: this.submit();
});

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

Пошаговый план для смены профессии

Детальное руководство по действиям перед отправкой формы

Синхронные или асинхронные задачи: выбор подхода

Перед отправкой формы могут быть необходимы различные действия – как синхронные, такие как валидация данные формы, так и асинхронные, например, обращение к серверному API. С синхронными задачами всё ясно: вызывайте this.submit(), как только они выполнятся. Для асинхронных задач следует использовать промисы JavaScript или синтаксис async/await для уверенности в том, что форма будет отправлена после полного завершения этих задач.

Надёжный jQuery и современные подходы

При работе с jQuery следует применять $('#myform').on('submit', function(event)), чтобы избежать проблем с устарелым кодом и соответствовать современным практикам программирования.

Ошибка валидации? Вот ваш фильтр

Создайте функцию beforeSubmit, которая будет централизованно выполнять все проверки и задачи перед отправкой. Если все проверки пройдены успешно, возвращайте true, а при обнаружении ошибок – false:

JS
Скопировать код
function beforeSubmit() {
    // Выполняем валидацию и проверки перед отправкой
    if (validFormConditions()) {
        return true;
    } else {
        return false;
    }
}

$('#myform').on('submit', function(event) {
    event.preventDefault();
    if (beforeSubmit()) {
        this.submit();
    }
});

При таком подходе ваш код будет чистым и удобным для повторного использования.

Не только кнопки могут отправлять форму

Бывает так, что отправку формы инициирует не стандартная кнопка, а другое действие. В этом случае свяжите ваши действия перед отправкой с этим триггером:

JS
Скопировать код
$('#mytrigger').on('click', function() {
    if (beforeSubmit()) {
        $('#myform')[0].requestSubmit();
    }
});

Обратите внимание, что requestSubmit() может требовать polyfill для поддержки в устаревших браузерах, например, в Safari.

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

Иногда полезно представить процесс отправки формы как поезд (🚂), который ожидает зелёный сигнал светофора для начала движения:

Станция 🚉: Форма (готовая к отправке) Светофор 🚦: Событие onsubmit (в ожидании подтверждения готовности к отправке)

В свой контекст проверку безопасности (функцию перед отправкой) можно представить как проверку перед отправлением поезда:

JS
Скопировать код
document.getElementById('myForm').onsubmit = function(event) {
    performSafetyCheck(); // Проведём проверку на наличие проблем 🧐🔍
    if (somethingWrong) {
        event.preventDefault(); // Стоп! Красный сигнал светофора 🚦
        alert('Осторожно! Исправьте ошибки перед отправкой формы.');
    }
};

Когда все проверки пройдены, начинается "поездка":

🧐🔍: Контроль успешно пройден! 🚂💨: Форма отправлена, началось движение!

Чистый HTML5 и JavaScript: основные роли

Пришло время воспользоваться мощью HTML5 и JavaScript:

  • Реализуйте API валидации HTML5 для обрабоки обязательных полей и форматирования данных.
  • Дополните это функциями на JavaScript, которые будут отображать сообщения об ошибках в режиме реального времени или выполнять дополнительные проверки.

Информирование пользователя при остановке отправки

После выполнения preventDefault() отправка формы приостанавливается. Вот как можно информировать пользователя об остановке:

JS
Скопировать код
document.getElementById('myform').addEventListener('submit', function(event) {
    if (!isFormValid()) {
        event.preventDefault();
        displayError('Осторожно! Исправьте ошибки для возможности отправки формы.');
        // функция displayError будет вашим помощником в уведомлении пользователей
    }
});

Маленький хитрый трюк с типами кнопок

Если вам требуется больше контроля над процессом, можно сменить тип кнопки отправки на type="button" и управлять процессом вручную:

JS
Скопировать код
<button type="button" id="customSubmit">Отправить</button>

$('#customSubmit').on('click', function() {
    if (beforeSubmit()) {
        $('#myform')[0].requestSubmit(); // Вот так мы обеспечиваем большую гибкость!
    }
});

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

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

  1. <form>: Элемент формы – HTML: HyperText Markup Language | MDN — Основательное руководство по элементам форм HTML и их поведению.
  2. EventTarget: addEventListener() method – Web APIs | MDN — Детальное описание методов JavaScript для перехвата событий отправки форм.
  3. Event: preventDefault() method – Web APIs | MDN — Информация о том, как применять preventDefault() для временной остановки отправки формы и выполнения своего кода.
  4. Form Validation < JavaScript | The Art of Web — Объяснение процесса валидации форм с использованием JavaScript до их отправки.
  5. Constraint validation – HTML: HyperText Markup Language | MDN — Обзор API валидации форм HTML5, помогающий проверить пользовательский ввод перед отправкой.
  6. Async/await — Подробное объяснение работы асинхронного JavaScript, которое важно для выполнения задач перед отправкой формы без задержки в обработке пользовательского интерфейса.
  7. submit event | jQuery API Documentation — Советы по обработке событий отправки форм с помощью jQuery для выполнения кода до отправки формы.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой метод используется для временной остановки отправки формы в JavaScript?
1 / 5