Получить профессию в Skypro
Как остановить отправку формы с помощью JavaScript и Dojo Toolkit
Быстрый ответ
Для блокировки отправки формы при помощи JavaScript, следует добавить обработчик события submit и использовать метод event.preventDefault():
document.querySelector('form').addEventListener('submit', event => event.preventDefault());В данном примере к форме применяется метод querySelector, и отправка данных прерывается с использованием метода preventDefault, который действует как "стоп-сигнал".
Валидация формы для блокировки отправки
Перед отправкой данных критически важно провалидировать введённую пользователем информацию в форме. Функция isValidForm() проверяет соответствие данных набору условий, выполняя роль автоматического валидатора.
document.querySelector('form').addEventListener('submit', function(event) {
if (!isValidForm(this)) {
event.preventDefault(); // Похоже, найдена ошибка, прерываем отправку!
return false; // Дополнительно блокируем потенциальную отправку данных
}
// Все проверки успешно пройдены, можно отправлять форму!
});Если форма не прошла валидацию, мы можем аккуратно вернуть пользователя на страницу с формой с помощью window.history.back(), это будет нашим GPS-навигатором по веб-страницам.
if (!isValidForm(this)) {
window.history.back(); // Если форма не прошла валидацию, возвращаем пользователя назад
event.preventDefault();
return false; // Удвоенно убеждаемся, что отправка данных не произойдёт
}Собственная кнопка для контроля отправки формы
Вы можете использовать пользовательскую кнопку "button" для управления процессом отправки данных формы:
<input type="button" value="Submit" onclick="submitForm()" /> <!-- Не всё так просто с этой кнопкой! -->function submitForm() {
var form = document.querySelector('form');
if (isValidForm(form)) {
// Форма успешно прошла проверку, отправляем данные!
form.submit();
}
} // Нажатие на эту кнопку приводит к проверке результатов, а не к непосредственной отправке!Обеспечение кросс-браузерной совместимости
Чтобы гарантировать правильную отправку формы во всех браузерах, следует обеспечить кросс-браузерную совместимость. Вот пример универсального подхода:
function attachEvent(element, eventName, handler) {
if (element.addEventListener) {
element.addEventListener(eventName, handler);
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, handler); // Для старых версий IE
}
}
attachEvent(document.querySelector('form'), 'submit', function(event) {
// Логика обработки отправки формы
event.preventDefault(); // Останавливаем отправку во всех браузерах!
});Эта функция аналогична лингвисту-диалектологу, который переводит современный язык в старый диалект для понимания всеми слушателями.
Визуализация
Процесс отправки формы можно представить следующим образом:
Станция (🚉): Отправка пользовательских данных
Поезд (🚆): Пакет данных формы
Семафор (🚦): JavaScript-функция, контролирующая движение поездаБлокировка движения поезда:
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault(); // 🚦 Сигнал остановки, "поезд" остаётся на месте!
});Результат:
До: 🚉 – 🚆➡️... (Форма направляется на сервер)
После: 🚉 – 🚆 (Поезд остаётся на месте, данные не отправляются)Метод event.preventDefault() останавливает "поезд" с данными.
🚦: JavaScript-код поступает в роли путевого диспетчера, контролирующего отправку "поезда" с данными формы.Продвинутые методы
Рассмотрим несколько современных подходов для управления процессом отправки формы.
Использование библиотек
Если вы используете Dojo, вы можете привязать обработчики событий с помощью dojo.connect:
dojo.connect(dijit.byId('myForm'), 'onsubmit', function(event) {
event.preventDefault(); // Правила обработки события остаются без изменений!
// Здесь логика валидации данных
});
Работа со старыми версиями кода
Иногда старые версии кода зависят от возвращаемого значения обработчика событий:
<form onsubmit="return validateForm();"> <!-- Старая школа, проверенные временем подходы! -->function validateForm() {
if (!meetConditions) {
return false; // Останавливаем отправку формы
}
return true; // Всё в порядке, производим отправку!
}Управление навигацией после блокировки отправки
Хотите перенаправить пользователя на другую страницу после прерывания отправки? Сделайте это так:
event.preventDefault();
window.location.href = '/another-page'; // Перенаправляем на другую страницу!Полезные материалы
- Событие: метод preventDefault() – Веб-API | MDN — Дополнительная информация о применении
preventDefault(). - javascript – event.preventDefault() против return false – Stack Overflow — Сравнение
preventDefaultиreturn false. - Валидация форм в JavaScript – W3Schools — Обзор валидации форм на стороне клиента при помощи JavaScript.
- web.dev — Всё о последних тенденциях в области веб-разработки.
- HTMLFormElement: метод submit() – Веб-API | MDN —Более глубокий анализ применения метода
submitHTMLFormElement.