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

:user-valid

Supporto dei browser

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 88.
  • Safari: 16.5.

Origine

:user-invalid

Supporto dei browser

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 88.
  • Safari: 16.5.

Origine

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>

Un&#39;immagine che combina 3 screenshot affiancati per il confronto. Ogni screenshot mostra un modulo web con gli stessi controlli di input, di selezione e dell&#39;area di testo. Il primo screenshot mostra il modulo nel suo stato iniziale prima di qualsiasi input dell&#39;utente. I bordi dei controlli sono grigi e il testo di aiuto riportato di seguito spiega che al momento ogni controllo corrisponderà al selettore di pseudo-classi :invalid. Il secondo screenshot mostra lo stesso modulo dopo che un utente ha fornito input per ogni controllo. I bordi di controllo sono verdi e il testo della guida riportato di seguito spiega che al momento ciascun controllo corrisponderà ai selettori pseudo-classe :valid e :user-valid. Lo screenshot terzo e ultimo mostra lo stesso modulo dopo che un utente ha rimosso tutti i dati inseriti. I bordi di controllo sono rossi e il testo della guida riportato di seguito spiega che ciascun controllo attualmente corrisponderà ai selettori pseudo-classe :invalid e :user-invalid.

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

Foto di copertina di Behzad Ghaffarian su Annulla schermata.