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

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

Оглавление:
  1. Применить псевдоклассы :valid и :invalid
  2. CSS для псевдоклассов :valid и :invalid
  3. Возможности псевдоклассов :valid и :invalid:
  4. Еще псевдоклассы CSS4

Применить псевдоклассы :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, не заполненное поле будет недействительно.
Поддержка браузерами псевдоклассов :valid и :invalid
Internet Explorer Chrome Opera Safari Firefox Android iOS
10+

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

к меню ↑

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