Как отменить отправку формы в ASP.net: метод validData()

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

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

<button type="submit" onclick="event.preventDefault();">Отправить</button>

Альтернативный вариант – это добавить обработчик события в методе onsubmit формы, который возвращает false, если проверка формы не пройдена:

<form onsubmit="return !isValidForm();">
  <button type="submit">Отправить</button>
</form>
<script>
function isValidForm() {
  // Здесь должна быть реализована ваша логика проверки
  return Math.random() > 0.5;
}
</script>

Методы предотвращения отправки формы

Нередко бывает так, что нажатие кнопки отправить схоже с нажатием на красную кнопку в кабине пилота: всё происходит чересчур быстро и часто вне нашего контроля. Важно быть уверенным, что отправка формы происходит лишь после проведения всех необходимых проверок.

Валидация формы

Перенос логики проверки в отдельную функцию, например, isValidForm(), повышает читаемость кода и облегчает его поддержку. Обратите внимание на следующий пример:

function isValidForm() {
  // Разместите здесь логику проверки
  return document.getElementById('myForm').elements.input.value !== 'bomb'; 
  // Мы против неожиданных "сюрпризов"
}

Подробнее об этом расскажет наш спикер на видео

Javascript и обработчики событий

Встроенный JavaScript иногда вызывает споры, но для избежания его прямого использования, рекомендуется воспользоваться addEventListener():

document.getElementById('myForm').addEventListener('submit', function(e) {
  if (!isValidForm()) {
    e.preventDefault();
  }
});

Применение AJAX

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

document.getElementById('myForm').addEventListener('submit', function(e) {
  e.preventDefault();
  if (isValidForm()) {
    sendAjax(); // На старт!
  }
});

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

Если вам кажется сложным работать с JavaScript напрямую, можете воспользоваться библиотеками, такими как jQuery, которые значительно облегчают процесс. Обработчик submit позволяет легко предотвратить отправку:

$('#myForm').submit(function(e) {
  if (!isValidForm()) {
    e.preventDefault();
  }
});

Создание логики проверки

Валидация формы – ваша персональная охрана на входе в клуб, которая пропускает только подходящие данные.

Управление отправкой формы с помощью кнопки

Вы можете контролировать процесс отправки данных напрямую через событие onclick кнопки, и таким образом, определять условия для дальнейших действий:

function btnClick(e) {
  if (!validData()) {
    e.preventDefault(); 
    // "Извините, ваши данные не соответствуют требованиям. Вход запрещён!"
  }
  // Если данные корректны, отправка произойдёт без препятствий
}

Перехват событий перед отправкой

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

document.getElementById('mySubmitBtn').onclick = function(e) {
  return btnClick(e);
};

AJAX для создания идеального пользовательского опыта

С помощью AJAX мы создаём иллюзию обновления страницы, оставляя её статичной в течение всего процесса обработки данных:

function submitFormWithAjax(data) {
  // Здесь будет логика AJAX-запроса...
  // Обновление страницы в зависимости от ответа сервера
  // Пользователи даже не заметят изменений!
}

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

1. Event: preventDefault() method – Web APIs | MDN — Стоп маршрут! Детальное руководство по блокировке отправки форм.
2. javascript – event.preventDefault() vs. return false – Stack Overflow — Методичное обучение предотвращению инцидентов: какова разница между preventDefault и return false?
3. HTML Form Elements — Полное руководство по элементам HTML-форм.
4. HTML Standard — Канонический текст по работе с HTML-формами.