:validIzbirnik omogoča, da izberete elemente, ki vsebujejo veljavno vsebino, kot je določena s typeatributa. :validje v specifikacijah CSS Selectors Level 3 opredeljen kot »psevdo-izbirnik veljavnosti«, kar pomeni, da se uporablja za oblikovanje interaktivnih elementov na podlagi ocene uporabnikovega vnosa.
Ta izbirnik ima eno posebno uporabo: zagotavlja uporabniku povratne informacije med interakcijo z obrazcem na strani. Spodnji primer uporablja CSS, da polja »E-pošta« obarva rdeče ali zeleno in se odziva na to, ali se vsebina ujema z veljavnim vzorcem e-poštnega naslova ali ne:
Glejte Pen: valid &: neveljavni vnosi Chrisa Coyierja (@chriscoyier) na CodePen
Upoštevajte, kako je prva (»E-pošta«) zeleno veljavna, tudi če na polju ni vsebine. To je zato, ker je vnos neobvezen, tako da bi, če bi bil prazen, prišlo do veljavne predložitve obrazca. Če želite odpraviti to vedenje, ima drugi atribut "required", kar pomeni, da bi prazno polje povzročilo neveljavno oddajo obrazca.
Zanimivosti
:validje mogoče "privezati" z drugimi psevdo-izbirniki: na primer:focuspotrditi velja, ko uporabnik tipka,:beforeali:afterustvariti ikone ali besedilo, da zagotovi več povratnih informacij uporabnikov, ali izbirniki atributov radiinput(value="")potrditi samo vnosna polja, ki vsebujejo vsebino.
Podpora za brskalnik
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10,0+ | 5.0+ | 4.0+ | 10,0+ | 10+ | 5+ | 2+ |
:validje bil uveden v modulu CSS Selectors 3, kar pomeni, da ga stare različice brskalnikov ne podpirajo. Vendar je sodobna podpora za brskalnik boljša. Če potrebujete starejšo podporo brskalnika, bodisi polifil, bodisi uporabite te izbirnike na nekritične načine - postopno izboljšanje, kar je priporočljivo.