Il :validselettore consente di selezionare elementi che contengono contenuto valido, come determinato dal suo typeattributo. :validè definito nella specifica CSS Selectors Level 3 come uno "pseudo-selettore di validità", il che significa che viene utilizzato per definire gli elementi interattivi sulla base di una valutazione dell'input dell'utente.
Questo selettore ha un uso particolare: fornire un feedback a un utente mentre sta interagendo con un modulo sulla pagina. L'esempio seguente utilizza CSS per trasformare i campi "Email" in rosso o in verde, rispondendo al fatto che i contenuti corrispondano o meno a un modello di indirizzo email valido:
Vedere gli input Pen: valid &: invalid di Chris Coyier (@chriscoyier) su CodePen
Nota come la prima ("Email") è verde-valida, anche quando non c'è contenuto nel campo. Questo perché l'input è facoltativo, quindi lasciarlo vuoto comporterebbe un invio di modulo valido. Per correggere questo comportamento, il secondo ha un attributo "obbligatorio", il che significa che un campo vuoto risulterebbe in un invio di modulo non valido.
Punti di interesse
:validpuò essere "concatenato" con altri pseudo-selettori: come:focusconvalidare solo quando l'utente sta digitando,:beforeo:aftergenerare icone o testo per fornire più feedback dell'utente, o selettori di attributi comeinput(value="")convalidare solo i campi di input contenenti contenuto.
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | 5+ | 2+ |
:validè stato introdotto nel modulo 3 dei selettori CSS, il che significa che le vecchie versioni dei browser non lo supportano. Tuttavia, il supporto del browser moderno sta migliorando. Se è necessario il supporto di browser meno recenti, utilizzare polyfill o utilizzare questi selettori in modi non critici come il miglioramento progressivo, consigliato.