:validSelektors ļauj jums izvēlēties elementi, kas satur derīgu saturu, kā noteikts tās typeatribūtu. :validCSS selektoru 3. līmeņa specifikācijā ir definēts kā “derīguma pseido-selektors”, kas nozīmē, ka to izmanto interaktīvu elementu veidošanai, pamatojoties uz lietotāja ievadīto informāciju.
Šim atlasītājam ir viens īpašs lietojums: sniegt atgriezenisko saiti lietotājam, kamēr viņi mijiedarbojas ar lapā esošo veidlapu. Tālāk sniegtajā piemērā CSS tiek izmantots, lai laukus “E-pasts” padarītu sarkanu vai zaļu, reaģējot uz to, vai saturs atbilst derīgam e-pasta adreses veidam:
Skatiet Kriss Koijē (@chriscoyier) Pen: derīgas un nederīgas ievades vietnē CodePen
Ievērojiet, kā pirmais (“E-pasts”) ir derīgs zaļā krāsā, pat ja laukā nav satura. Tas ir tāpēc, ka ievade nav obligāta, tāpēc, atstājot to tukšu, tiks iesniegta derīga veidlapa. Lai novērstu šo darbību, otrajam ir atribūts “obligāts”, kas nozīmē, ka tukša lauka rezultātā veidlapa tiks iesniegta nederīgi.
Apskates vietas
:validvar būt “pieķēdēts” ar citiem pseido-atlasītājiem: patīk:focusapstiprināt tikai tad, kad lietotājs raksta,:beforevai:afterģenerēt ikonas vai tekstu, lai sniegtu vairāk lietotāju atsauksmes, vai atribūtu atlasītājiem patīkinput(value="")apstiprināt tikai ievades laukus, kuros ir saturs.
Pārlūka atbalsts
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | 5+ | 2+ |
:validtika ieviests CSS selektoru 3. modulī, kas nozīmē, ka vecās pārlūkprogrammu versijas to neatbalsta. Tomēr mūsdienu pārlūka atbalsts kļūst arvien labāks. Ja jums ir nepieciešams vecāks pārlūka atbalsts, vai nu veiciet aizpildīšanu, vai arī izmantojiet šos atlasītājus nekritiskos veidos, ieteicams progresīvā uzlabošanā.