Le pseudo-classi :user-valid e :user-invalid

L'input utente è uno dei problemi più sensibili in qualsiasi interfaccia utente. Un'applicazione utilizzabile deve aiutare gli utenti a vedere, comprendere e correggere eventuali errori nell'input. I selettori di pseudoclasse :user-valid e :user-invalid contribuiscono a migliorare l'esperienza utente di convalida degli input fornendo feedback solo sugli errori dopo che un utente ha cambiato 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 alle pseudoclassi :valid e :invalid esistenti. Entrambe corrispondono a un controllo del modulo se il valore attuale soddisfa 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 modulo obbligatorio e vuoto corrisponderà 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 pseudoclassi :user-valid e :user-invalid

Usa queste pseudo-classi per definire lo stile dei controlli di input, select e textarea, 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 vederla in azione:

Migliore esperienza utente con meno codice

Senza queste pseudo-classi, il raggiungimento dell'esperienza utente consentita :user-valid e :user-invalid richiedevano di scrivere codice stateful 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 browser per gestire tutto questo automaticamente.

Altre risorse

• :user-valid - Documentazione web MDN
• :user-invalid - Documenti web MDN
• Pseudo-classi di interazione utente - bozza dell'editor W3C
• Convalida dei vincoli dei moduli - MDN web docs
• Forms Accessibility Tutorial - Web Accessibility Initiative

Foto di copertina di Behzad Ghaffarian su Annulla schermata.