:validSelektorius leidžia jums pasirinkti elementus, kuriuose galioja turinį, kaip nustatyta jo typeatributas. :validCSS selektorių 3 lygio specifikacijoje apibrėžiamas kaip „galiojimo pseudo selektorius“, tai reiškia, kad jis naudojamas interaktyvių elementų stiliui kurti, remiantis vartotojo įvesties įvertinimu.
Šis selektorius turi vieną konkretų paskirtį: teikti vartotojui grįžtamąjį ryšį, kai jis sąveikauja su puslapyje esančia forma. Toliau pateiktame pavyzdyje CSS naudojamas laukams „El. Paštas“ paversti raudonai arba žaliai, atsižvelgiant į tai, ar turinys atitinka galiojantį el. Pašto adreso šabloną:
Žiūrėkite „Chris: Coyier“ (@chriscoyier) „Pen: valid &: invalid“ įvestis „CodePen“
Atkreipkite dėmesį, kaip pirmasis („El. Paštas“) yra žalias, net jei lauke nėra turinio. Taip yra todėl, kad įvestis yra neprivaloma, todėl ją paliekant tuščią bus pateikta tinkama forma. Norėdami išspręsti šią problemą, antrasis turi „būtiną“ atributą, o tai reiškia, kad tuščias laukas pateiks neteisingą formos pateikimą.
Lankytinos vietos
:validgali būti „sujungtas“ su kitais pseudo selektoriais: patinka:focuspatvirtinti tik tada, kai vartotojas rašo,:beforearba:aftergeneruoti piktogramas ar tekstą, kad būtų teikiama daugiau vartotojų atsiliepimų, arba atributų parinkėjai norėtųinput(value="")patvirtinti tik įvesties laukus, kuriuose yra turinio.
Naršyklės palaikymas
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| 10,0+ | 5.0+ | 4.0+ | 10,0+ | 10+ | 5+ | 2+ |
:validbuvo pristatytas CSS selektorių 3 modulyje, o tai reiškia, kad senos naršyklių versijos jo nepalaiko. Tačiau šiuolaikinis naršyklės palaikymas gerėja. Jei jums reikia senesnės naršyklės palaikymo, užpildykite arba užpildykite šiuos pasirinkiklius nekritiniais būdais - rekomenduojama laipsniškai patobulinti.