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

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>

Image combinant trois captures d&#39;écran côte à côte à des fins de comparaison. Chaque capture d&#39;écran montre un formulaire Web avec les mêmes commandes de saisie, de sélection et de zone de texte. La première capture d&#39;écran montre le formulaire dans son état initial avant toute saisie utilisateur. Les bordures des commandes sont grises, et le texte d&#39;aide ci-dessous explique que chaque commande correspond actuellement au sélecteur de pseudo-classe :invalid. La deuxième capture d&#39;écran montre le même formulaire après qu&#39;un utilisateur a saisi une valeur pour chaque commande. Les bordures des commandes sont vertes, et le texte d&#39;aide ci-dessous explique que chaque commande correspond actuellement aux sélecteurs de pseudo-classe :valid et :user-valid. La troisième et dernière capture d&#39;écran montre le même formulaire après qu&#39;un utilisateur a supprimé toutes ses entrées. Les bordures des commandes sont rouges, et le texte d&#39;aide ci-dessous explique que chaque commande correspond actuellement aux sélecteurs de pseudo-classe :invalid et :user-invalid.

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

Cover photo by Behzad Ghaffarian on Unsplash.