Questa pagina è stata tradotta dall'API Cloud Translation.

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

:user-valid

Supporto dei browser

:user-invalid

Supporto dei browser

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 messa a fuoco 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.