Med :validväljaren kan du välja element som innehåller giltigt innehåll, som bestäms av dess typeattribut. :validdefinieras i CSS Selectors Nivå 3-specifikationen som en "giltighets-pseudoväljare", vilket betyder att den används för att utforma interaktiva element baserat på en utvärdering av användarinmatningen.
Denna väljare har en speciell användning: att ge en användare feedback medan de interagerar med ett formulär på sidan. I exemplet nedan används CSS för att göra fältet "E-post" rött eller grönt och svara på huruvida innehållet matchar ett giltigt e-postadressmönster:
Se Pen: valid &: ogiltiga inmatningar av Chris Coyier (@chriscoyier) på CodePen
Observera hur den första (“E-post”) är grön-giltig - även om det inte finns något innehåll i fältet. Detta beror på att ingången är valfri, så att lämna den tom skulle resultera i en giltig formulärsändning. För att åtgärda detta beteende har det andra ett ”obligatoriskt” attribut, vilket innebär att ett tomt fält skulle resultera i en ogiltig formulärsändning.
Intressanta platser
:validkan "kedjas" med andra pseudoväljare: som:focusatt bara validera när användaren skriver,:beforeeller:afteratt generera ikoner eller text för att ge mer användarfeedback, eller attributväljare villinput(value="")bara validera inmatningsfält som innehåller innehåll.
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | 5+ | 2+ |
:validintroducerades i CSS Selectors Module 3, vilket innebär att gamla versioner av webbläsare inte stöder det. Modernt webbläsarstöd blir dock bättre. Om du behöver äldre webbläsarsupport, antingen polyfill, eller använder dessa väljare på icke-kritiska sätt på en progressiv förbättring, vilket rekommenderas.