HTML предоставляет встроенную валидацию через атрибуты, поэтому браузер блокирует невалидные отправки и показывает сообщения — JavaScript не требуется.
html
Submit
HTML предоставляет встроенную валидацию через атрибуты, поэтому браузер блокирует невалидные отправки и показывает сообщения — JavaScript не требуется.
Submit
Атрибуты валидации: required, min/max, minlength/maxlength, pattern (регулярное выражение) и сам тип (email, url, number). При отправке браузер проверяет их, останавливает отправку если что-то не соответствует, и показывает встроенное всплывающее окно на первом невалидном поле.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
Вы можете читать и настраивать валидацию на JavaScript:
const input = document.querySelector("input");
input.validity.valueMissing; // true if required and empty
input.validity.typeMismatch; // true if email/url format is wrong
input.checkValidity(); // returns boolean, fires invalid event
input.setCustomValidity("Passwords don't match"); // custom error message
setCustomValidity позволяет добавлять правила, которые атрибуты не могут выразить (например, "пароль совпадает с подтверждением").
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Всегда валидируйте на сервере тоже — валидация на клиенте нужна для UX; пользователи могут её обойти.
Встроенная валидация дает вам доступные, локализованные сообщения об ошибках и мгновенную обратную связь без дополнительных затрат.
Комбинируйте декларативные атрибуты с API ограничения валидации для пользовательских правил — но никогда не полагайтесь на неё как единственную линию защиты; сервер обязательно должен валидировать.