Den :validVelgeren lar deg velge elementer som inneholder gyldig innhold, som bestemmes av dens typeegenskap. :valider definert i CSS Selectors nivå 3-spesifikasjonen som en "gyldighets-pseudovelger", noe som betyr at den brukes til å style interaktive elementer basert på en evaluering av brukerinndata.
Denne velgeren har en spesiell bruk: å gi en bruker tilbakemelding mens de kommuniserer med et skjema på siden. Eksemplet nedenfor bruker CSS for å gjøre feltene "E-post" røde eller grønne, og svare på om innholdet samsvarer med et gyldig e-postadressemønster:
Se pennen: gyldig og: ugyldige innganger av Chris Coyier (@chriscoyier) på CodePen
Legg merke til hvordan den første (“E-post”) er grønn-gyldig - selv når det ikke er noe innhold i feltet. Dette er fordi inngangen er valgfri, så hvis du lar den være tom, vil det føre til en gyldig skjemainnlevering. For å fikse denne oppførselen har den andre et "obligatorisk" attributt, noe som betyr at et tomt felt vil resultere i en ugyldig skjemainnsending.
Interessepunkt
:validkan "lenkes" med andre pseudovalgere: liker:focuså bare validere når brukeren skriver,:beforeeller:afterå generere ikoner eller tekst for å gi mer brukerfeedback, eller attributtvelgere vilinput(value="")bare validere inndatafelt som inneholder innhold.
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | 5+ | 2+ |
:validble introdusert i CSS Selectors Module 3, som betyr at gamle versjoner av nettlesere ikke støtter det. Imidlertid blir moderne nettleserstøtte bedre. Hvis du trenger eldre nettleserstøtte, enten fylle ut, eller bruke disse velgerne på ikke-kritiske måter, på en progressiv forbedring, som anbefales.