В :validселектора ви позволява да изберете елементи, които съдържат валиден съдържание, както е определено от неговия typeатрибут. :validсе дефинира в спецификациите CSS Selectors Level 3 като „псевдоселектор за валидност“, което означава, че се използва за стилизиране на интерактивни елементи въз основа на оценка на потребителския вход
Този селектор има една конкретна употреба: предоставя на потребителя обратна връзка, докато той взаимодейства с формуляр на страницата. Примерът по-долу използва CSS, за да превърне полетата „Имейл“ в червено или зелено, отговаряйки на това дали съдържанието съответства на валиден модел на имейл адрес:
Вижте писалката: валидни и: невалидни входове от Chris Coyier (@chriscoyier) в CodePen
Обърнете внимание как първият („Email“) е валиден в зелено - дори когато в полето няма съдържание. Това е така, защото въвеждането не е задължително, така че оставянето му празно би довело до валидно изпращане на формуляр. За да коригира това поведение, вторият има атрибут „задължителен“, което означава, че празно поле би довело до подаване на невалиден формуляр.
Точки на интерес
:validмогат да бъдат „оковани“ с други псевдоселектори: като:focusда проверявате само когато потребителят пише,:beforeили:afterда генерирате икони или текст, за да осигурите повече обратна връзка от потребителя, или селектори на атрибутиinput(value="")да валидират само полета за въвеждане, съдържащи съдържание.
Поддръжка на браузър
| Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | 5+ | 2+ |
:validбеше въведен в CSS Selectors Module 3, което означава, че старите версии на браузърите не го поддържат. Съвременната поддръжка на браузъра обаче се подобрява. Ако се нуждаете от по-стара поддръжка на браузъра, или polyfill, или използвайте тези селектори по некритични начини - прогресивно подобрение, което се препоръчва.