Как подсветить ошибки в форме

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

Псевдокласс :user-invalid срабатывает, когда пользователь ввёл неверное значение и ушёл с поля:

<style>
  input { padding: 8px; border: 2px solid silver; border-radius: 6px; }
  input:user-invalid { border-color: crimson; }
  input:user-valid { border-color: seagreen; }
</style>
 
<input type="email" placeholder="Email" required>

Введите anna, затем щёлкните мимо поля — рамка станет красной. Исправьте на anna@example.com — зелёной.

Текст ошибки

Подсказку держат скрытой и показывают, когда поле рядом стало неверным. Псевдокласс :has() проверяет поле внутри подписи:

<style>
  .error { display: none; color: crimson; font-size: 14px; }
  label:has(:user-invalid) .error { display: block; }
</style>
 
<label>
  Email <input type="email" required>
  <span class="error">Enter an email like anna@example.com</span>
</label>

Что такое «неверное»

Поле неверно, если нарушает свои ограничения: required, type, pattern, minlength, min, max. Поэтому сначала опишите правила атрибутами, а CSS только покажет результат проверки.

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

Берут старый псевдокласс :invalid. Он срабатывает сразу при загрузке, поэтому пустая обязательная форма встречает пользователя красными рамками, хотя он ещё ничего не ввёл:

<style>
  input:invalid { border: 2px solid crimson; }
</style>
 
<input type="email" placeholder="Already red" required>