CSS :valid Pseudo-classe
La pseudo-classe CSS :valid corrisponde ai controlli di modulo il cui valore supera la validazione. Scopri come funziona con esempi pratici.
La pseudo-classe :valid corrisponde a qualsiasi controllo di modulo (come <input>, <select> o <textarea>) il cui valore attuale supera la validazione dei vincoli incorporati nell'elemento. Offre un modo basato solo su CSS per reagire all'accettabilità dei dati di un campo — senza bisogno di JavaScript.
Un controllo viene abbinato da :valid quando ha vincoli di validazione e il suo valore soddisfa tutti. I casi più comuni includono:
- Un
<input type="email">contenente un indirizzo formattato correttamente. - Un
<input type="number">il cui valore rientra nell'intervallomin/max. - Un campo
type="url",type="date"otype="tel"contenente dati ben formati. - Un campo con un attributo
patternil cui valore corrisponde all'espressione regolare. - Un campo
requiredche non è vuoto.
Questa pseudo-classe è il corrispettivo di :invalid. Insieme permettono di fornire un feedback visivo immediato mentre l'utente digita. È anche strettamente correlata a :required, :optional e :in-range.
Cose da sapere
- Un controllo privo di vincoli (ad esempio un semplice
<input type="text">senzarequired,patterno limiti di lunghezza) è sempre considerato valido — corrisponderà a:validanche quando è vuoto. - La corrispondenza si aggiorna in tempo reale mentre l'utente modifica il campo, non solo all'invio del modulo, quindi gli stili possono lampeggiare durante la digitazione. Per ritardare il feedback, combinala con
:focuso le pseudo-classi:user-invalid/:user-valid. - La specificità è importante:
input:valideinput:invalidhanno la stessa specificità, quindi la regola dichiarata più tardi nel foglio di stile ha la precedenza nei casi limite. Mantieni l'ordine intenzionale.
Versione
Sintassi
Sintassi CSS :valid
:valid {
css declarations;
}Esempio del selettore :valid:
Esempio di codice CSS :valid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
border: 1px solid #cccccc;
padding: 5px 10px;
}
input:valid {
background-color: #eeeeee;
}
</style>
</head>
<body>
<h2>:valid selector example</h2>
<form>
<input type="email" value="[email protected]" />
</form>
</body>
</html>Nell'esempio fornito, lo sfondo grigio scompare nel momento in cui viene inserito un indirizzo email non valido, perché l'input non corrisponde più a :valid.
Esempio con campi obbligatori e un segnale verde
Un pattern comune è abbinare :valid a :invalid in modo che ogni campo mostri uno stato chiaro "corretto / non ancora". Qui, i campi obbligatori diventano verdi una volta che contengono dati accettabili e rossi finché non lo fanno:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
padding: 6px 10px;
margin-bottom: 10px;
display: block;
border: 2px solid #cccccc;
}
input:valid {
border-color: #2eca6a;
}
input:invalid {
border-color: #e3382c;
}
</style>
</head>
<body>
<h2>Valid vs. invalid fields</h2>
<form>
<input type="email" placeholder="Email" required />
<input type="number" min="1" max="10" placeholder="1 to 10" required />
</form>
</body>
</html>Poiché entrambi i campi sono required, inizialmente corrispondono a :invalid (vuoti), poi passano a :valid non appena si inserisce un'email valida e un numero nell'intervallo 1–10.
Pseudo-classi correlate
:invalid— l'esatto opposto: corrisponde ai controlli che non superano la validazione.:requirede:optional— corrispondono in base al fatto che un controllo sia obbligatorio o meno.:in-range— corrisponde agli input numerici/data il cui valore è compreso nell'intervallomin/max.