Встроенная проверка HTML-форм: required, pattern, type и Constraint Validation API

Что это такое

HTML проверяет элементы формы перед отправкой без каких-либо скриптов. required, minlength и maxlength, min, max и step, pattern, а также типы полей email, url, number и date задают ограничения. Если элемент нарушает ограничение, браузер отказывается отправлять форму и показывает собственное сообщение у первого некорректного элемента. Руководство MDN описывает сторону CSS: некорректный элемент соответствует :invalid, а после взаимодействия пользователя с ним — также :user-invalid. Constraint Validation API (checkValidity(), reportValidity(), setCustomValidity(), объект validity) предоставляет то же состояние скриптам; novalidate у формы отключает всплывающие сообщения браузера, сохраняя работу API.

Почему это важно

Встроенная проверка работает ещё до загрузки, выполнения или сбоя любого JavaScript; сообщения показываются на языке браузера без работы по переводу; ограничения хранятся один раз, в разметке, где их могут читать скрипты, тесты и поисковые роботы. Это не мера безопасности: руководство MDN прямо требует, чтобы сервер независимо от этого проверял каждую отправку.

Как применять

• Сначала выберите type: email, url и number дают собственные ограничения и клавиатуру. Используйте inputmode для произвольного текста, которому нужна только цифровая клавиатура.
• Добавьте required, minlength, min/max и pattern для правил формата. Шаблон компилируется как регулярное выражение JavaScript и обязан совпадать со всем значением. Опишите ожидаемый формат в видимом тексте и атрибуте title; указанный источник отмечает, что браузеры могут использовать title в сообщении проверки.
• Оформляйте :user-invalid, а не :invalid, чтобы пустые обязательные поля не краснели до взаимодействия пользователя.
• Используйте setCustomValidity() для правил между полями, например подтверждения пароля, и сбрасывайте его пустой строкой, иначе элемент останется некорректным.
• Если при novalidate вы выводите собственный список ошибок, всё равно вызывайте reportValidity(), чтобы пользователи клавиатуры и программ чтения с экрана переходили к первой ошибке.
• Проверьте серверную обработку отправкой с novalidate или через curl; проверки браузера — удобство, а не контракт.

Подводные камни

Встроенные всплывающие ошибки нельзя оформлять стилями; они исчезают при смене фокуса и показывают одну ошибку за раз. pattern у type="email" сочетается со встроенной проверкой, поэтому пройти необходимо обе. Отключённые элементы никогда не проверяются. Обязательный элемент, скрытый через display: none, всё ещё блокирует отправку, но браузеру негде показать сообщение; об этом часто сообщают как об ошибке «форма ничего не делает». Поля даты и числа отображают зависящие от локали виджеты, стиль которых трудно менять.