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

La saisie utilisateur est l'un des aspects les plus sensibles de toute interface utilisateur. Une clé application doivent aider les utilisateurs à voir, comprendre et corriger les erreurs 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, avoir besoin d'écrire du code avec état pour suivre les entrées modifiées par un utilisateur.

Les sélecteurs de pseudo-classe d'interaction 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 que ils ne sont mis en correspondance avec un contrôle de formulaire qu'après une interaction significative l'entrée.

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 des utilisateurs et de validations de contraintes. 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 - Documents Web MDN
• :user-invalid - MDN Web Docs
• Pseudo-classes d'interaction avec l'utilisateur – Version préliminaire de l'éditeur du W3C
• Validation de contrainte de formulaire – Documents Web MDN
• Tutoriel sur l'accessibilité dans Forms – Initiative Web Accessibility

Cover photo by Behzad Ghaffarian on Unsplash.