Les pseudo classes user-valid et user-invalid en CSS

Temps de lecture : 12 minutes environ.

Bienvenue dans ce tutoriel consacré aux nouvelles pseudo-classes CSS :user-valid et :user-invalid. Ces pseudo-classes permettent d'effectuer des validations de formulaires côté client sans nécessiter de JavaScript, en fournissant un retour visuel à l'utilisateur. Elles sont particulièrement utiles pour améliorer l'expérience utilisateur en indiquant visuellement si les données saisies sont correctes ou non.

Présentation des Pseudo-Classes

  • :user-valid : Cette pseudo-classe s'applique aux éléments de formulaire dont la valeur respecte les contraintes de validation définies (comme le type de champ, les attributs pattern, minlength, maxlength, etc.).
  • :user-invalid : Cette pseudo-classe s'applique aux éléments de formulaire dont la valeur ne respecte pas les contraintes de validation définies.

Ces pseudo-classes offrent une alternative aux pseudo-classes :valid et :invalid, en ne s'appliquant qu'après une interaction utilisateur, ce qui évite d'afficher des styles de validation dès le chargement de la page.

Exemple Pratique

HTML de Base

Nous allons créer un formulaire simple avec un champ email et un champ de texte :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User-Valid</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<form action="">
<div>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="subject">Sujet</label>
<input type="text" id="subject" required minlength="5">
</div>
</form>
</body>
</html>

CSS pour les Pseudo-Classes

Nous allons maintenant ajouter le CSS pour appliquer des styles en fonction de la validité des champs de formulaire :

input:user-valid {
background-color: green;
}

input:user-invalid {
background-color: red;
}

Avec ce CSS, les champs de formulaire vont changer de couleur de fond en fonction de leur validité :

  • Un fond vert (green) pour les champs valides.
  • Un fond rouge (red) pour les champs invalides.

Validation avec des Attributs HTML

Pour améliorer la validation du champ email, nous pouvons utiliser l'attribut pattern :

<input type="email" id="email" required pattern="^\S+@\S+\.\S$">

Cette expression régulière (regex) est une validation basique pour les adresses email.

Messages de Validation

Nous pouvons également ajouter des messages de validation conditionnels qui s'affichent en fonction de la validité des champs :

HTML

<div>
<label for="email">Email</label>
<input type="email" id="email" required>
<div id="email-feedback" class="message">
<ul class="validation">
<li class="is-valid">Email correct</li>
<li class="is-invalid">Email incorrect</li>
</ul>
</div>
</div>
<div>
<label for="subject">Sujet</label>
<input type="text" id="subject" required minlength="5">
<div id="subject-feedback" class="message">
<ul class="validation">
<li class="is-valid">Sujet correct</li>
<li class="is-invalid">Sujet incorrect</li>
</ul>
</div>
</div>

CSS

.validation li {
display: none;
}

input:user-valid + .message .is-valid {
display: block;
color: green;
}

input:user-invalid ~ .message .is-invalid {
display: block;
color: red;
}

Dans ce CSS, les messages de validation sont initialement masqués (display: none). Ils apparaissent en fonction de la validité des champs grâce aux pseudo-classes :user-valid et :user-invalid :

  • Lorsque le champ est valide, le message "Email correct" ou "Sujet correct" s'affiche en vert.
  • Lorsque le champ est invalide, le message "Email incorrect" ou "Sujet incorrect" s'affiche en rouge.

Conclusion

Les pseudo-classes :user-valid et :user-invalid sont de puissants outils pour améliorer l'expérience utilisateur en offrant une validation visuelle immédiate des champs de formulaire sans JavaScript. Bien que leur prise en charge soit récente et qu'il puisse encore être nécessaire d'utiliser du JavaScript pour une compatibilité complète avec tous les navigateurs, elles offrent une solution élégante et simple pour des validations de base.

N'hésitez pas à expérimenter avec ces pseudo-classes et à les intégrer dans vos projets pour rendre vos formulaires plus interactifs et user-friendly.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat

Les pseudo classes user-valid et user-invalid en CSS
Article publié le

Catégorie : CSS

Mots-clés : css css3

Partager : Partager sur Facebook Partager sur Twitter Partager sur LinkedIn