CSS псевдокласс :valid
Псевдокласс CSS :valid соответствует элементам формы, значение которых проходит валидацию. Узнайте, как он работает, и попробуйте реальные примеры.
Псевдокласс :valid соответствует любому элементу управления формой (например, <input>, <select> или <textarea>), текущее значение которого проходит встроенную проверку ограничений элемента. Он даёт возможность на чистом CSS реагировать на то, являются ли данные поля допустимыми — без JavaScript.
Элемент управления соответствует :valid, если он имеет ограничения валидации и его значение удовлетворяет всем из них. Типичные случаи:
<input type="email">, содержащий корректно отформатированный адрес.<input type="number">, значение которого находится в диапазонеmin/max.- Поле
type="url",type="date"илиtype="tel", содержащее корректно оформленные данные. - Поле с атрибутом
pattern, значение которого соответствует регулярному выражению. - Поле с атрибутом
required, которое не пустое.
Этот псевдокласс является противоположностью :invalid. Вместе они позволяют обеспечивать мгновенную визуальную обратную связь по мере ввода пользователем данных. Он также тесно связан с :required, :optional и :in-range.
Важные особенности
- Элемент управления без каких-либо ограничений (например, обычный
<input type="text">безrequired,patternили ограничений длины) всегда считается допустимым — он будет соответствовать:validдаже при пустом значении. - Соответствие обновляется в реальном времени по мере редактирования пользователем, а не только при отправке формы, поэтому стили могут мерцать во время набора. Чтобы отложить обратную связь, комбинируйте с
:focusили псевдоклассами:user-invalid/:user-valid. - Специфичность имеет значение:
input:validиinput:invalidимеют одинаковую специфичность, поэтому правило, объявленное позже в таблице стилей, побеждает в спорных случаях. Следите за порядком правил.
Версия
Синтаксис
CSS :valid синтаксис
:valid {
css declarations;
}Пример селектора :valid:
Пример кода CSS :valid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
border: 1px solid #cccccc;
padding: 5px 10px;
}
input:valid {
background-color: #eeeeee;
}
</style>
</head>
<body>
<h2>:valid selector example</h2>
<form>
<input type="email" value="[email protected]" />
</form>
</body>
</html>В данном примере серый фон исчезает в тот момент, когда вводится некорректный адрес электронной почты, поскольку поле ввода больше не соответствует :valid.
Пример с обязательными полями и зелёным индикатором
Распространённый паттерн — совмещать :valid с :invalid, чтобы каждое поле отображало чёткое состояние «верно / ещё нет». В этом примере обязательные поля становятся зелёными, как только в них введены допустимые данные, и красными — пока нет:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
padding: 6px 10px;
margin-bottom: 10px;
display: block;
border: 2px solid #cccccc;
}
input:valid {
border-color: #2eca6a;
}
input:invalid {
border-color: #e3382c;
}
</style>
</head>
<body>
<h2>Valid vs. invalid fields</h2>
<form>
<input type="email" placeholder="Email" required />
<input type="number" min="1" max="10" placeholder="1 to 10" required />
</form>
</body>
</html>Поскольку оба поля имеют атрибут required, изначально они соответствуют :invalid (пустые), а затем переключаются на :valid, как только вы вводите настоящий адрес электронной почты и число в диапазоне 1–10.
Связанные псевдоклассы
:invalid— полная противоположность: соответствует элементам управления, которые не проходят валидацию.:requiredи:optional— соответствуют в зависимости от того, является ли элемент управления обязательным.:in-range— соответствует числовым/датовым полям ввода, значение которых находится в пределахmin/max.