Не тыкать в пользователя ошибками, пока он ничего не сделал

Показать пользователю ошибку позволяет псевдокласс :invalid. Он соответствует инпутам, значение которых не валидно.

В этом примере инпут, если он пустой, будет иметь красный фон:

<input required type="text">
<style>
:invalid {
  background-color: red;
}
</style>

Так при первом заходе пользователя на страницу поле будет уже подсвечено красным цветом. А он даже не прочитал что надо вводить и вообще что это за сайт. Неприятно.

Решение: в новом черновике спецификации селекторов описан класс :user-invalid. Он соответствует тем полям, с которыми пользователь провзаимодействовал + срабатывает также после нажатия на button[type="submit"] или input[type="submit"]. В этом примере поле подсветится красным только когда пользователь что-то в него введет, удалит и уберет фокус, или после нажатия на кнопку отправки формы:

<form action="">
  <label>
    Text
    <input required type="text">     
  </label>
  <button type="submit">Submit</button>
</form>
<style>
input:user-invalid {
  background-color: red;
}
</style>

Прежде чем вы попытались опробовать этот пример в деле: сейчас это так НЕ работает. Поддерки селектора нет почти нигде. Только частично за префиксом в FireFox под другим именем. Подробнее на MDN про :-moz-ui-invalid.