ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70%Забронировать скидку

Как остановить отправку формы с помощью JavaScript и Dojo Toolkit

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

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

Для блокировки отправки формы при помощи JavaScript, следует добавить обработчик события submit и использовать метод event.preventDefault():

JS
Скопировать код
document.querySelector('form').addEventListener('submit', event => event.preventDefault());

В данном примере к форме применяется метод querySelector, и отправка данных прерывается с использованием метода preventDefault, который действует как "стоп-сигнал".

Пройдите тест и узнайте подходит ли вам сфера IT
Пройти тест

Валидация формы для блокировки отправки

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

JS
Скопировать код
document.querySelector('form').addEventListener('submit', function(event) {
  if (!isValidForm(this)) {
    event.preventDefault(); // Похоже, найдена ошибка, прерываем отправку!
    return false;           // Дополнительно блокируем потенциальную отправку данных
  }
  // Все проверки успешно пройдены, можно отправлять форму!
});

Если форма не прошла валидацию, мы можем аккуратно вернуть пользователя на страницу с формой с помощью window.history.back(), это будет нашим GPS-навигатором по веб-страницам.

JS
Скопировать код
if (!isValidForm(this)) {
  window.history.back(); // Если форма не прошла валидацию, возвращаем пользователя назад
  event.preventDefault();
  return false; // Удвоенно убеждаемся, что отправка данных не произойдёт
}

Собственная кнопка для контроля отправки формы

Вы можете использовать пользовательскую кнопку "button" для управления процессом отправки данных формы:

HTML
Скопировать код
<input type="button" value="Submit" onclick="submitForm()" /> <!-- Не всё так просто с этой кнопкой! -->
JS
Скопировать код
function submitForm() {
  var form = document.querySelector('form');
  if (isValidForm(form)) {
    // Форма успешно прошла проверку, отправляем данные!
    form.submit();
  }
} // Нажатие на эту кнопку приводит к проверке результатов, а не к непосредственной отправке!

Обеспечение кросс-браузерной совместимости

Чтобы гарантировать правильную отправку формы во всех браузерах, следует обеспечить кросс-браузерную совместимость. Вот пример универсального подхода:

JS
Скопировать код
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(); // Останавливаем отправку во всех браузерах!
});

Эта функция аналогична лингвисту-диалектологу, который переводит современный язык в старый диалект для понимания всеми слушателями.

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

Процесс отправки формы можно представить следующим образом:

Markdown
Скопировать код
Станция (🚉): Отправка пользовательских данных
Поезд (🚆): Пакет данных формы
Семафор (🚦): JavaScript-функция, контролирующая движение поезда

Блокировка движения поезда:

JS
Скопировать код
document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault(); // 🚦 Сигнал остановки, "поезд" остаётся на месте!
});

Результат:

Markdown
Скопировать код
До: 🚉 – 🚆➡️... (Форма направляется на сервер)
После: 🚉 – 🚆 (Поезд остаётся на месте, данные не отправляются)

Метод event.preventDefault() останавливает "поезд" с данными.

Markdown
Скопировать код
🚦: JavaScript-код поступает в роли путевого диспетчера, контролирующего отправку "поезда" с данными формы.

Продвинутые методы

Рассмотрим несколько современных подходов для управления процессом отправки формы.

Использование библиотек

Если вы используете Dojo, вы можете привязать обработчики событий с помощью dojo.connect:

JS
Скопировать код
dojo.connect(dijit.byId('myForm'), 'onsubmit', function(event) {
  event.preventDefault(); // Правила обработки события остаются без изменений!
  // Здесь логика валидации данных
});

Работа со старыми версиями кода

Иногда старые версии кода зависят от возвращаемого значения обработчика событий:

HTML
Скопировать код
<form onsubmit="return validateForm();"> <!-- Старая школа, проверенные временем подходы! -->
JS
Скопировать код
function validateForm() {
  if (!meetConditions) {
    return false;  // Останавливаем отправку формы
  }
  return true; // Всё в порядке, производим отправку!
}

Управление навигацией после блокировки отправки

Хотите перенаправить пользователя на другую страницу после прерывания отправки? Сделайте это так:

JS
Скопировать код
event.preventDefault();
window.location.href = '/another-page'; // Перенаправляем на другую страницу!

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

  1. Событие: метод preventDefault() – Веб-API | MDN — Дополнительная информация о применении preventDefault().
  2. javascript – event.preventDefault() против return false – Stack Overflow — Сравнение preventDefault и return false.
  3. Валидация форм в JavaScript – W3Schools — Обзор валидации форм на стороне клиента при помощи JavaScript.
  4. web.dev — Всё о последних тенденциях в области веб-разработки.
  5. HTMLFormElement: метод submit() – Веб-API | MDN —Более глубокий анализ применения метода submit HTMLFormElement.
Свежие материалы