Data di pubblicazione: 8 novembre 2023
L'input dell'utente è uno dei problemi più delicati in qualsiasi interfaccia utente. Un'applicazione utilizzabile deve aiutare gli utenti a vedere, comprendere e correggere eventuali errori nell'input. I selettori di pseudo-classi :user-valid
e :user-invalid
contribuiscono a migliorare
l'esperienza utente della convalida dell'input fornendo un feedback sugli errori solo
dopo che un utente ha modificato l'input. Con questi nuovi selettori, non è più necessario scrivere codice con stato per tenere traccia dell'input modificato da un utente.
I selettori delle pseudo-classi di interazione utente
I selettori di pseudoclassi :user-valid
e :user-invalid
sono simili agli pseudoclassi :valid
e :invalid
esistenti. Entrambi corrispondono a un controllo del modulo in base al fatto che il valore corrente soddisfi i vincoli di convalida. Tuttavia, il
vantaggio delle nuove pseudoclassi :user-valid
e :user-invalid
è che
corrispondono a un controllo del modulo solo dopo che un utente ha interagito in modo significativo con
l'input.
Un controllo del modulo obbligatorio e vuoto corrisponde a :invalid
anche se un utente non ha iniziato a interagire con la pagina. Tuttavia, lo stesso controllo del modulo non corrisponderà a :user-invalid
finché l'utente non avrà modificato l'input e non lo avrà lasciato in uno stato non valido.
Utilizza le pseudo-classi :user-valid
e :user-invalid
Utilizza queste pseudoclassi per definire lo stile dei controlli di input, di selezione e di 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 utente e vincoli di convalida. Interagisci con la seguente demo per vederli in azione:
Esperienza utente migliore con meno codice
Senza queste pseudoclassi, per ottenere l'esperienza utente abilitata da :user-valid
e :user-invalid
era necessario scrivere codice con stato aggiuntivo. Questo codice doveva tenere traccia del valore iniziale, dello stato di attivazione corrente dell'input, dell'entità delle modifiche apportate dall'utente al valore, 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 automaticamente.
Altre risorse
- :user-valid - Documentazione web MDN
- :user-invalid - MDN web docs
- Pseudo-classi di interazione utente - bozza dell'editor W3C
- Convalida dei vincoli dei moduli - MDN web docs
- Tutorial sull'accessibilità di Moduli - Web Accessibility Initiative
Foto di copertina di Behzad Ghaffarian su Unsplash.