Les pseudo-classes :user-valid et :user-invalid

La saisie utilisateur est l'un des aspects les plus sensibles de toute interface utilisateur. Une application utilisable doit aider les utilisateurs à voir, comprendre et corriger les erreurs de saisie. Les sélecteurs de pseudo-classe :user-valid et :user-invalid contribuent à améliorer l'expérience utilisateur de la validation des entrées en fournissant des commentaires sur les erreurs uniquement après qu'un utilisateur a modifié l'entrée. Avec ces nouveaux sélecteurs, il n'est plus nécessaire d'écrire du code avec état pour suivre les entrées modifiées par l'utilisateur.

Sélecteurs de pseudo-classes d'interaction avec l'utilisateur

Les sélecteurs de pseudo-classe :user-valid et :user-invalid sont semblables aux pseudo-classes :valid et :invalid existantes. Les deux correspondent à un contrôle de formulaire en fonction de la valeur actuelle qui répond à ses contraintes de validation. Toutefois, l'avantage des nouvelles pseudo-classes :user-valid et :user-invalid est qu'elles ne correspondent à un contrôle de formulaire qu'après qu'un utilisateur a interagi de manière significative avec la saisie.

Un contrôle de formulaire obligatoire et vide correspond à :invalid, même si un utilisateur n'a pas commencé à interagir avec la page. Toutefois, cette même commande de formulaire ne correspondra pas à :user-invalid tant que l'utilisateur n'aura pas modifié la saisie et ne l'aura pas laissée dans un état non valide.

Utiliser les pseudo-classes :user-valid et :user-invalid

Utilisez ces pseudo-classes pour styliser les commandes d'entrée, de sélection et de zone de texte, comme illustré dans les exemples suivants:

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>

Les sélecteurs correspondent en fonction d'une combinaison d'interactions utilisateur et de contraintes de validation. Interagissez avec la démonstration suivante pour les voir en action:

Meilleure expérience utilisateur avec moins de code

Sans ces pseudo-classes, l'expérience utilisateur proposée par :user-valid et :user-invalid nécessitait d'écrire du code avec état supplémentaire. Ce code devait suivre la valeur initiale, l'état de focus actuel de la saisie, l'étendue des modifications apportées par l'utilisateur à la valeur, exécuter une vérification de validité supplémentaire et enfin ajouter une classe à sélectionner pour le style. Vous pouvez désormais compter sur le navigateur pour gérer tout cela automatiquement.

Autres ressources

• :user-valid - Documentation Web MDN
• :user-invalid - MDN Web Docs
• Pseudo-classes d'interaction avec l'utilisateur – Version préliminaire de l'éditeur du W3C
• Validation des contraintes de formulaire – MDN Web Docs
• Tutoriel sur l'accessibilité dans Forms – Web Accessibility Initiative

Cover photo by Behzad Ghaffarian on Unsplash.