Перейти к содержанию

:invalid

Псевдо-класс :invalid находит любые <input> или <form> элементы, контент которых не проходит валидацию, в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что позволяет пользователю видеть и исправлять ошибки.

Замечание

Радиокнопки. Если любая из радиокнопок в группе (т. е., с одинаковым атрибутом name) имеет атрибут required, псевдо-класс :invalid применяется ко всем из них, если ни одна из кнопок группы не выбрана.

Псевдоклассы

Спецификации

Пример 1

Этот пример представляет собой простую форму, цвета элементов которой зелёные, когда данные корректные, и красные, когда нет.

1
2
3
4
5
6
7
8
<form>
  <label>Введите URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Введите эл. почту:</label>
  <input type="email" required />
</form>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

Пример 2

Использования псевдоклассов :invalid и :valid на примере ввода пользователем своего адреса электронной почты (проверка по наличию в написании адреса собаки - @):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
  <head>
    <title>Псевдокласс :first-of-type</title>
    <style type="text/css">
      input:invalid {
        border: 2px solid red;
      }
      input:valid {
        border: 2px solid green;
      }
    </style>
  </head>
  <body>
    <input
      type="email"
      value="myemailpochta.ru"
    /><br /><br />
    <p>
      <strong
        >Internet Explorer 9 и ниже не поддерживает
        псевдоклассы :invalid и :valid..</strong
      >
    </p>
  </body>
</html>

Пример использования псевдоклассов :invalid и :valid.

См. также

Ссылки

  • Псевдо-класс :invalid MDN (рус.)

Комментарии