Как работает валидация HTML-форм?

Вопрос

Какие встроенные механизмы валидации есть у HTML-форм?

Короткий ответ

Браузер умеет валидировать формы без единой строчки JavaScript: через атрибуты required, pattern, min/max, специальные типы input (email, number, url) и CSS-псевдоклассы :valid/:invalid.

Подробный ответ

• required — поле обязательно для заполнения.
• type="email" | "number" | "url" | "tel" — браузер сам проверяет формат.
• pattern="regex" — валидация по регулярному выражению.
• minlength / maxlength, min / max — ограничения длины/диапазона.
• novalidate на <form> отключает встроенную валидацию (полезно, когда валидацию делает JS/фреймворк).
• Псевдоклассы :valid, :invalid, :required, :optional позволяют стилизовать поля в зависимости от состояния.
• JS API: element.checkValidity(), element.reportValidity(), element.setCustomValidity('текст ошибки').

Встроенная валидация удобна для простых случаев, но для сложной бизнес-логики (например, "пароли должны совпадать") обычно нужен JavaScript.

Пример

<form novalidate>
  <input
    type="email"
    required
    placeholder="Email"
  />
  <input
    type="password"
    minlength="8"
    pattern="(?=.*\d)(?=.*[a-z]).{8,}"
    required
    title="Минимум 8 символов, включая цифру"
  />
  <button type="submit">Войти</button>
</form>

input:invalid {
  border-color: red;
}

Дополнительные вопросы

• Чем checkValidity() отличается от reportValidity()?
• Как сделать кастомное сообщение об ошибке?
• Нужно ли дублировать клиентскую валидацию на сервере?