Met de :validselector kunt u elementen selecteren die geldige inhoud bevatten, zoals bepaald door het typeattribuut. :validwordt in de CSS Selectors Level 3-specificatie gedefinieerd als een "validiteitspseudo-selector", wat betekent dat het wordt gebruikt om interactieve elementen te stylen op basis van een evaluatie van gebruikersinvoer.
Deze selector heeft één specifiek doel: een gebruiker feedback geven terwijl hij een formulier op de pagina gebruikt. In het onderstaande voorbeeld wordt CSS gebruikt om de velden 'E-mail' rood of groen te maken, als reactie op de vraag of de inhoud wel of niet overeenkomt met een geldig e-mailadrespatroon:
Zie de pen: geldige en: ongeldige invoer door Chris Coyier (@chriscoyier) op CodePen
Merk op hoe de eerste ("E-mail") groen-geldig is, zelfs als er geen inhoud in het veld staat. Dit komt omdat de invoer optioneel is, dus het blanco laten zou resulteren in een geldige indiening van het formulier. Om dit probleem op te lossen, heeft de tweede een "verplicht" attribuut, wat betekent dat een leeg veld zou resulteren in een ongeldige indiening van het formulier.
Nuttige Plaatsen
:validkan worden "geketend" met andere pseudo-selectors::focusvalideren alleen wanneer de gebruiker aan het typen is,:beforeof:afterpictogrammen of tekst genereren om meer gebruikersfeedback te geven, of attribuutselectorsinput(value="")valideren alleen invoervelden die inhoud bevatten.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | 5+ | 2+ |
:validwerd geïntroduceerd in CSS Selectors Module 3, wat betekent dat oude versies van browsers dit niet ondersteunen. De moderne browserondersteuning wordt echter steeds beter. Als u oudere browserondersteuning nodig hebt, polyfill, of gebruik deze selectors op niet-kritieke manieren, zoals progressieve verbetering, wat wordt aanbevolen.