:validValitsin voit valita elementtejä, jotka sisältävät voimassa sisältöä, joka määräytyy sen typemäärite. :validon määritelty CSS-valitsimien tason 3 spesifikaatiossa "pätevyysvalitsimeksi", mikä tarkoittaa, että sitä käytetään interaktiivisten elementtien tyyliin käyttäjän syötteen arvioinnin perusteella.
Tällä valitsimella on yksi erityinen käyttötarkoitus: antaa käyttäjälle palautetta, kun hän on vuorovaikutuksessa sivun lomakkeen kanssa. Alla olevassa esimerkissä CSS: llä muutetaan Sähköposti-kentät punaisiksi tai vihreiksi vastaamalla siihen, vastaavatko sisällöt kelvollista sähköpostiosoitemallia vai eivät:
Katso Chris Coyierin (@chriscoyier) kynä: voimassa olevat ja virheelliset syötteet CodePenistä
Huomaa, kuinka ensimmäinen ("Sähköposti") on vihreä-voimassa, vaikka kentässä ei ole sisältöä. Tämä johtuu siitä, että syöte on valinnainen, joten tyhjän jättäminen johtaisi kelvolliseen lomakkeen lähetykseen. Tämän ongelman korjaamiseksi toisella on "pakollinen" -attribuutti, mikä tarkoittaa, että tyhjä kenttä johtaisi virheelliseen lomakkeen lähetykseen.
Kiinnostavat paikat
:validvoidaan ketjuttaa muiden näennäisselektorien kanssa: haluaa:focusvahvistaa vain, kun käyttäjä kirjoittaa,:beforetai:afterluoda kuvakkeita tai tekstiä, jotta saadaan enemmän palautetta käyttäjältä, tai määritteen valitsimet haluavatinput(value="")validoida vain sisältöä sisältävät syöttökentät.
Selaimen tuki
| Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | 5+ | 2+ |
:validesiteltiin CSS Selectors -moduulissa 3, mikä tarkoittaa, että selainten vanhat versiot eivät tue sitä. Nykyaikainen selaintuki on kuitenkin parantumassa. Jos tarvitset vanhempaa selaintukea, joko polyfill-täyttö tai käytä näitä valitsimia ei-kriittisillä tavoilla á la progressive enhancement, mikä on suositeltavaa.