Триггер валидации HTML-форм без отправки на сервер: JS, jQuery

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

Для запуска валидации HTML-формы используется метод reportValidity():

document.querySelector('form').reportValidity() // Всё просто, форма обработана!

Результат: true, если форма валидна, или запрос пользователю исправить ошибки в случае их наличия. Для этого кнопка отправки не требуется.

Удостоверьтесь в корректной настройке элементов формы, используя атрибуты валидации типа required, type и pattern.

Обеспечение совместимости с различными браузерами

Хоть reportValidity() и упрощает контроль в современных браузерах, необходимо также учесть обратную совместимость и гарантировать правильную работу валидации в браузерах как Internet Explorer и Edge.

var form = document.querySelector('form'); // Берём форму
if (!form.reportValidity || form.reportValidity()) { // В процессе контроля мы обеспечиваем поддержку и IE, и Edge
   // Форма прошла валидацию или метод reportValidity не поддерживается
} else {
   // В форме обнаружены ошибки
}

Усовершенствование обратной связи при валидации с помощью JavaScript

Стандартная валидация HTML5, например, с помощью атрибута 'pattern', представляет собой базовые регулярные выражения. Однако, добавление функционала JavaScript позволит реализовать более сложные правила валидации.

<input type="text" id="username" pattern="[a-zA-Z0-9]{5,}" title="Не менее 5 букв или цифр" required>
<!-- Короткие имена недопустимы... Правда, Том? Постойте-ка... -->

Фокусировка на ошибке для пользователя

Если метод reportValidity() выявил проблемное поле, важно сразу же направить на него внимание пользователя:

const firstInvalid = form.querySelector(':invalid'); // Ищем первый невалидный элемент
if (firstInvalid) {
  firstInvalid.focus(); // Фокусируем внимание на ошибке
}

Ручное управление сообщениями об ошибках

Иногда системные сообщения об ошибках только запутывают. Запрограммируем более понятные сообщения для упрощения работы пользователя:

form.addEventListener('invalid', (event) => {
 event.preventDefault();
 displayCustomErrorMessage(event.target);
}, true);
// Информируем об ошибках и помогаем с их исправлением.

Стратегии инициирования валидации

Но как же запустить процесс валидации?

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

Перед проверкой полей, отключаем отправку формы с помощью onsubmit и return false;. Валидацию начинаем только при идеальном заполнении каждого поля.

<form onsubmit="return validateForm();">
...
</form>

Невидимая кнопка отправки

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

<input type="submit" id="hiddenSubmit" style="display:none">
<!-- Меня не видно, но и я важен! -->

Применение JavaScript для валидации формы

Если reportValidity() не подходит, используйте checkValidity(). Выполните валидацию напрямую через JavaScript и управляйте ошибками посредством программирования.

if (!form.checkValidity()) {
 displayErrors();
}
// Выявляем и не упускаем ошибок!

Упрощение кода и поддержание его в порядке

Если библиотеки, как jQuery, не требуются, лучше обойтись без них. Все любят чистый и понятный JavaScript код.

applyForm.onsubmit = function() {return false;};
applyForm.checkValidity();
applyForm.reportValidity();
// Здесь нет jQuery, только чистый JavaScript.

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

В итоге, валидация HTML-формы выглядит так:

HTML-форма (📝): [Поле 1, Поле 2, Поле 3]

Процесс валидации:

📝 ➡️ Проверяем с помощью reportValidity (🚧) → 😊 (всё верно) или 😟 (есть проблемы) ➡️ 🏁 отправляем форму

Если проверка прошла успешно (😊):

📝 ➡️ 😊 ➡️ 🏁 (Форма отправлена)

Если обнаружены ошибки (😟):

📝 ➡️ 😟 ➡️ 🛑 (Требуются исправления)

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

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

1. Клиентская валидация форм – учебный курс по веб-разработке | MDN
2. HTML-спецификация
3. HTML-спецификация
4. Свойства и методы форм
5. Валидация форм, часть 2: API ограничений валидации (JavaScript) | CSS-Tricks
6. Валидация форм HTML5 — SitePoint
7. Валидация форм на JavaScript