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

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

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



:invalid {
background-color: red;
}


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

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

В этом примере поле подсветится красным только когда пользователь что-то в него введет, удалит и уберет фокус, или после нажания на кнопку отправки формы:



Text


Submit


input:user-invalid {
background-color: red;
}


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

#selectors #pseudo_class

Источник: https://drafts.csswg.org/selectors-4/#user-pseudos