Les navigateurs intègrent des fonctionnalités de validation qui permettent de vérifier que les données saisies par les utilisateurs sont au bon format. Vous pouvez activer ces fonctionnalités en utilisant les éléments et les attributs appropriés. En outre, vous pouvez améliorer la validation des formulaires avec CSS et JavaScript.
Pourquoi devez-vous valider vos formulaires ?
Dans le module précédent, vous avez appris à aider les utilisateurs à éviter d'avoir à répéter saisissez à nouveau les informations dans les formulaires. Comment aider les utilisateurs à saisir des données valides ?
Il est frustrant de remplir un formulaire sans savoir quels champs sont obligatoires, ou les contraintes de ces champs. Par exemple, vous saisissez un nom d'utilisateur et envoyez un formulaire pour découvrir que les noms d'utilisateur doivent comporter au moins huit caractères.
Vous pouvez aider les utilisateurs dans cette tâche en définissant des règles de validation et en les communiquant.
Aider les utilisateurs à éviter les champs obligatoires manquants par inadvertance
Vous pouvez utiliser le code HTML pour spécifier le format et les contraintes corrects pour les données saisies dans vos formulaires. Vous devez également spécifier les champs obligatoires.
Essayez d'envoyer ce formulaire sans saisir de données.
Un message d'erreur s'affiche-t-il à côté de <input> pour vous indiquer que le champ est obligatoire ?
Cela est dû à l'attribut required.
<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">
Vous avez déjà appris que vous pouvez utiliser de nombreux autres types, par exemple type="email".
Examinons l'adresse e-mail obligatoire <input>.
Essayez d'envoyer ce formulaire sans saisir de données. Y a-t-il une différence par rapport à la démonstration précédente ? Insérez maintenant votre nom dans le champ de l'adresse e-mail et essayez d'envoyer. Un message d'erreur différent s'affiche. Comment est-ce possible ? Vous recevez un autre message, car la valeur que vous avez saisie n'est pas une adresse e-mail valide.
L'attribut required indique au navigateur que le champ est obligatoire.
Le navigateur vérifie également si les données saisies correspondent au format de type.
Le champ d'adresse e-mail affiché dans cet exemple n'est valide que s'il n'est pas vide et que les données saisies correspondent à une adresse e-mail valide.
Aider l'utilisateur à saisir le bon format
Vous avez appris à rendre un champ obligatoire. Comment indiqueriez-vous au navigateur qu'un utilisateur doit saisir au moins huit caractères dans un champ de formulaire ?
Essayez la démonstration. Une fois la modification effectuée, vous ne devriez plus pouvoir envoyer le formulaire si vous saisissez moins de huit caractères.
<label for="password">Password (required)</label> <input required="" minlength="8" type="password" id="password" name="password">
Le nom de l'attribut est minlength.
Définissez la valeur sur 8 pour obtenir la règle de validation souhaitée.
Si vous voulez l'inverse, utilisez maxlength.
Communiquer vos règles de validation
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>
Assurez-vous que tous les utilisateurs comprennent vos règles de validation.
Pour ce faire, associez la commande de formulaire à un élément qui explique les règles.
Pour ce faire, ajoutez un attribut aria-describedby à l'élément avec le id au format suivant.
Attribut de motif
Il arrive parfois que vous souhaitiez définir des règles de validation plus avancées.
Là encore, vous pouvez utiliser un attribut HTML.
Il s'appelle pattern et vous pouvez définir
expression régulière.
<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">
Seules les lettres minuscules sont autorisées. l'utilisateur doit entrer entre deux et vingt caractères.
Comment modifieriez-vous pattern pour autoriser également les lettres majuscules ?
Essayer
La bonne réponse est pattern="[a-zA-Z]{2,20}".
Ajouter des styles
Vous savez maintenant ajouter une validation en HTML. Et si vous pouviez également styliser les commandes de formulaire en fonction de l'état de validation ? C'est possible avec CSS.
Appliquer un style à un champ de formulaire obligatoire
Montrez à l'utilisateur qu'un champ est obligatoire avant d'interagir avec votre formulaire.
Vous pouvez appliquer un style aux champs required avec la pseudo-classe CSS :required.
input:required {
border: 2px solid;
}
Commandes de formulaire non valides pour le style
Vous souvenez-vous de ce qui se passe si les données saisies par l'utilisateur ne sont pas valides ? Le message d'erreur joint au contrôle du formulaire s'affiche. Ne serait-il pas idéal d'adapter l'apparence de l'élément lorsque cela se produit ?
Vous pouvez utiliser la pseudo-classe :invalid.
pour ajouter des styles aux commandes de formulaire non valides.
Il existe également la pseudo-classe :valid, qui permet de styliser les éléments de formulaire valides.
Il existe d'autres façons d'adapter vos styles en fonction de la validation. Dans le module sur les CSS, vous découvrirez comment appliquer des styles aux formulaires.
Validation avec JavaScript
Pour une validation plus poussée de vos formulaires, vous pouvez utiliser le API JavaScript Constraint Validation :
Fournir des messages d'erreur pertinents
Comme vous l'avez vu précédemment, les messages d'erreur ne sont pas tous identiques dans tous les navigateurs. Comment diffuser le même message auprès de tous les utilisateurs ?
Pour ce faire, utilisez la
setCustomValidity()
de l'API Constraint Validation.
Voyons comment cela fonctionne.
const nameInput = document.querySelector('[name="name"]');
nameInput.addEventListener('invalid', () => {
nameInput.setCustomValidity('Please enter your name.');
});
Interrogez l'élément pour lequel vous souhaitez définir le message d'erreur personnalisé.
Écoutez l'événement invalid de l'élément défini.
Vous avez alors défini le message avec setCustomValidity().
Cet exemple affiche le message Please enter your name. si l'entrée n'est pas valide.
Ouvrez la version de démonstration dans différents navigateurs. vous devriez voir le même message partout. Essayez maintenant de supprimer le code JavaScript, puis réessayez. Les messages d'erreur par défaut s'affichent à nouveau.
Vous pouvez faire beaucoup plus avec l'API Constraint Validation. Vous trouverez des informations détaillées sur l'utilisation la validation avec JavaScript dans un module ultérieur.
Comment effectuer la validation en temps réel
Vous pouvez ajouter une validation en temps réel en JavaScript en écoutant l'événement onblur d'une commande de formulaire.
et valider les données saisies dès qu'un utilisateur quitte un champ du formulaire.
Cliquez sur le champ du formulaire dans la démonstration,
saisir "web" et je clique ailleurs sur la page.
Le message d'erreur natif pour minlength s'affiche sous le champ du formulaire.
En savoir plus sur l'implémentation validation en temps réel avec JavaScript dans un prochain module.
Testez vos connaissances
Testez vos connaissances sur la validation des formulaires
Quel attribut utilisez-vous pour rendre les commandes de formulaire obligatoires ?
requiredneededessentialobligatoryEst-il possible de définir vos propres messages d'erreur ?
message.:invalid.Vous pouvez envoyer un <input> avec type="email" et l'attribut required: