Publié le 8 novembre 2023
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-classes :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 actuel de la sélection de l'entrée, 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 - MDN Web Docs
- :user-invalid - MDN Web Docs
- Pseudo-classes d'interaction avec l'utilisateur – Ébauche 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.