:invalid¶
Псевдо-класс :invalid
находит любые <input>
или <form>
элементы, контент которых не проходит валидацию, в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что позволяет пользователю видеть и исправлять ошибки.
Замечание
Радиокнопки. Если любая из радиокнопок в группе (т. е., с одинаковым атрибутом name
) имеет атрибут required
, псевдо-класс :invalid
применяется ко всем из них, если ни одна из кнопок группы не выбрана.
Псевдоклассы
- :active
- :any-link
- :blank
- :checked
- :current()
- :default
- :defined
- :dir()
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :future
- :has()
- :host
- :host()
- :host-context()
- :hover
- :indeterminate
- :in-range
- :invalid
- :is()](is.md)
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :local-link
- :not()
- :nth-child()
- :nth-col()
- :nth-last-child()
- :nth-last-col()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :past
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :target
- :target-within
- :user-invalid
- :valid
- :visited
- :where()
Спецификации¶
Пример 1¶
Этот пример представляет собой простую форму, цвета элементов которой зелёные, когда данные корректные, и красные, когда нет.
<form>
<label>Введите URL:</label>
<input type="url" />
<br />
<br />
<label>Введите эл. почту:</label>
<input type="email" required />
</form>
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
на примере ввода пользователем своего адреса электронной почты (проверка по наличию в написании адреса собаки - @
):
<!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
MDN (рус.)