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

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>

Un&#39;immagine che combina tre screenshot affiancati per il confronto. Ogni screenshot mostra un modulo web con gli stessi controlli di input, selezione e 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 dei controlli sono verdi e il testo di aiuto riportato di seguito spiega che al momento ogni controllo corrisponde sia ai selettori di pseudo-classi :valid che :user-valid. Lo screenshot terzo e ultimo mostra lo stesso modulo dopo che un utente ha rimosso tutti i dati inseriti. I bordi del controllo sono rossi e il testo di aiuto riportato di seguito spiega che al momento ogni controllo corrisponde sia ai selettori di pseudo-classi :invalid che :user-invalid.

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

Foto di copertina di Behzad Ghaffarian su Unsplash.