Проверка форм

Валидация — проверка, что данные в форме заполнены правильно: почта похожа на почту, обязательные поля не пустые, возраст — разумное число. Браузер умеет делать это сам по атрибутам полей: если что-то не так, он не отправит форму и покажет сообщение рядом с полем.

Обязательное поле

Атрибут required запрещает отправить форму с пустым полем:

<form>
  <input name="name" required>
  <button>Отправить</button>
</form>

Нажмите «Отправить», ничего не вводя, — браузер покажет подсказку «Заполните это поле». Текст и вид подсказки зависят от браузера.

Длина текста

minlength и maxlength ограничивают число символов. maxlength вообще не даст напечатать лишнее, а minlength проверяется при отправке:

<form>
  <label>Логин <input name="login" minlength="3" maxlength="12" required></label>
  <button>Создать</button>
</form>

Числа и даты

Для полей number, range и date границы задают атрибуты min и max, а step — допустимый шаг:

<form>
  <p><label>Гостей <input type="number" name="guests" min="1" max="8" required></label></p>
  <p><label>Дата <input type="date" name="day" min="2026-01-01" required></label></p>
  <button>Забронировать</button>
</form>

Введите 20 гостей — браузер сообщит, что значение должно быть не больше 8.

Тип поля и шаблон

Поля email и url проверяют формат сами. Для своих правил есть атрибут pattern — регулярное выражение, шаблон, которому должен соответствовать весь текст:

<form>
  <p><label>Почта <input type="email" name="email" required></label></p>
  <p><label>Индекс <input name="zip" pattern="[0-9]{5}" title="Пять цифр"></label></p>
  <button>Отправить</button>
</form>

Шаблон [0-9]{5} означает «ровно пять цифр». Текст из title браузер добавит к сообщению об ошибке.

Оформление ошибок

Псевдокласс :user-invalid в CSS выбирает поле с ошибкой, но только после того, как пользователь с ним поработал. Похожий :invalid срабатывает сразу, и пустая форма краснеет ещё до ввода:

<style>
  input:user-invalid { border: 2px solid crimson; }
  input:user-valid { border: 2px solid seagreen; }
</style>
 
<form>
  <label>Почта <input type="email" name="email" required></label>
  <button>Отправить</button>
</form>

Введите что-нибудь без @ и щёлкните мимо поля — рамка станет красной. О псевдоклассах подробно рассказано в главе про CSS.

Отключить проверку

Атрибут novalidate у формы выключает встроенную проверку. Его ставят, когда проверку и сообщения об ошибках делают на JavaScript в своём стиле:

<form novalidate>
  <input type="email" name="email" required>
  <button>Отправить без проверки</button>
</form>

Частая ошибка

Проверка в браузере — только удобство для честного пользователя. Её легко обойти: убрать атрибут в инструментах разработчика или отправить запрос без браузера вовсе. Поэтому сервер всегда проверяет данные заново, а браузерная валидация лишь экономит человеку время на исправление опечаток.

Спасибо, что читаете!