:user-valid:user-invalidL'input utente è uno degli aspetti più delicati di qualsiasi interfaccia utente. Un'applicazione utilizzabile deve aiutare gli utenti a visualizzare, comprendere e correggere eventuali errori nell'input. I selettori di pseudo-classe :user-valid e :user-invalid aiutano a migliorare l'esperienza utente di convalida dell'input fornendo feedback sugli errori solo dopo che un utente ha modificato l'input. Con questi nuovi selettori, non è più necessario scrivere codice stateful per tenere traccia dell'input modificato da un utente.
I selettori di pseudo-classe di interazione utente
Le pseudo-classi :user-valid e :user-invalid sono simili alle
pseudo-classi :valid e :invalid esistenti. Entrambi corrispondono a un controllo modulo in base
a se il valore attuale soddisfa i vincoli di convalida. Tuttavia, il vantaggio delle nuove pseudo-classi :user-valid e :user-invalid è che corrispondono a un controllo modulo solo dopo che un utente ha interagito in modo significativo con l'input.
Un controllo modulo obbligatorio e vuoto corrisponderà a :invalid anche se un utente non ha iniziato a interagire con la pagina. Tuttavia, lo stesso controllo modulo non
corrisponderà a :user-invalid finché l'utente non ha modificato l'input e lo ha lasciato in uno
stato non valido.
Utilizza le pseudo-classi :user-valid e :user-invalid
Usa queste pseudo-classi per definire lo stile dei controlli di input, selezionare e area di testo, come mostrato nei seguenti esempi:
input:user-valid,
select:user-valid,
textarea:user-valid {
border-color: green;
}
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
border-color: red;
}
<input required="required" />
<select required="required">
<option value="">Choose an option</option>
<option value="1">One</option>
</select>
<textarea required="required"></textarea>
I selettori corrispondono in base a una combinazione di interazioni degli utenti e vincoli di convalida. Interagisci con la seguente demo per vederla in azione:
Migliore esperienza utente con meno codice
Senza queste pseudo-classi, raggiungere l'esperienza utente abilitata da
:user-valid e :user-invalid ha richiesto la scrittura di codice stateful aggiuntivo. Quel codice aveva bisogno di tenere traccia del valore iniziale, dell'attuale stato di interesse dell'input, dell'entità delle modifiche al valore da parte dell'utente, eseguire un controllo di validità aggiuntivo e, infine, aggiungere una classe da selezionare per lo stile. Ora puoi fare affidamento sul browser
per gestire tutto questo automaticamente.
Altre risorse
- :user-valid - documenti web MDN
- :user-invalid - documenti web MDN
- Pseudo-classi di interazione utente - Bozza dell'editor di W3C
- Convalida vincolo del modulo: documenti web MDN
- Tutorial sull'accessibilità di Moduli - Iniziativa per l'accessibilità web
Foto di copertina di Behzad Ghaffarian su Unsplash.