Псевдоклассы :valid и :invalid

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

Применить псевдоклассы :valid и :invalid

В примере поле для ввода электронной почты:

E-mail:
<input type="email" required>

Обратите внимание, в поле должен быть введен действительный адрес электронной почты. Для поля требующего проверки атрибут required является обязательным.

CSS для псевдоклассов :valid и :invalid

Поле для ввода электронной почты обведено красным контуром еще до того, как пользователь введёт действительный адрес электронной почты после символа @.

input[type=email]:invalid {
outline: red solid 1px;
}

input[type=email]:valid {
outline: lightgreen solid 1px;
}

Как только пользователь вводит правильный адрес электронной почты, контур станет зеленым.

Применить псевдоклассы :valid и :invalid для достоверности вводимых дынных
Применить псевдоклассы :valid и :invalid

К этим псевдоклассам можно добавить псевдоэлемент в виде зеленой галочки или подобное, для того чтобы визуально подтвердить допустимые вводные данные.

Возможности псевдоклассов :valid и :invalid:

Псевдоклассы :valid и :invalid являются селекторами четвёртого уровня CSS4.

  • Псевдоклассы :valid и :invalid могут также применяться ко всем типам полей для проверки валидности.
  • Они не работают для элементов таких как div или p потому что эти элементы не имеют какой-либо тип данных.
  • Обычный текстовый тип ввода по умолчанию является допустимым, но если для поля ввода добавлен атрибут required, не заполненное поле будет недействительно.

Все возможные варианты проверки достоверности вводимых дынных в поле веб-формы описаны на странице «HTML5 проверка данных веб-форм»

Еще псевдоклассы CSS4