:user-valid:user-invalidLes entrées utilisateur sont l'une des préoccupations les plus sensibles dans 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 permettent d'améliorer l'expérience utilisateur de validation des entrées en ne fournissant des commentaires sur les erreurs qu'après avoir 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 un utilisateur.
Sélecteurs de pseudo-classe d'interaction utilisateur
Les sélecteurs de pseudo-classe :user-valid et :user-invalid sont semblables aux pseudo-classes :valid et :invalid existantes. Les deux correspondent à une commande de formulaire selon que leur valeur actuelle répond aux contraintes de validation qu'elle impose. Toutefois, les nouvelles pseudo-classes :user-valid et :user-invalid ont l'avantage de ne correspondre à une commande de formulaire qu'après une interaction importante de l'utilisateur avec l'entrée.
Une commande de formulaire obligatoire et vide correspond à :invalid même si un utilisateur n'a pas commencé à interagir avec la page. Cependant, cette même commande de formulaire ne correspondra pas à :user-invalid tant que l'utilisateur n'aura pas modifié l'entrée et la laisser 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. Regardez la démonstration suivante pour les voir en action:
Meilleure expérience utilisateur avec moins de code
Sans ces pseudo-classes, l'obtention de l'expérience utilisateur activé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 sélection actuel 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 maintenant 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 utilisateur – Brouillon de l'éditeur du W3C
- Validation de la contrainte de formulaire : documentation Web MDN
- Tutoriel sur l'accessibilité dans Forms – Initiative Web Accessibility
Photo de couverture par Behzad Ghaffarian sur Unsplash.