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

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

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

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:

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

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

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

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

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

$('#mytrigger').on('click', function() {
    if (beforeSubmit()) {
        $('#myform')[0].requestSubmit();
    }
});

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 для выполнения кода до отправки формы.