Les navigateurs intègrent des fonctionnalités de validation qui permettent de vérifier que les utilisateurs ont saisi les données au bon format. Vous pouvez activer ces fonctionnalités en utilisant les éléments et les attributs appropriés. Vous pouvez également améliorer la validation des formulaires avec CSS et JavaScript.
Pourquoi valider vos formulaires ?
Dans le module précédent, vous avez appris à éviter aux utilisateurs de saisir à nouveau des informations dans des formulaires à plusieurs reprises. Comment pouvez-vous aider les utilisateurs à saisir des données valides ?
Il est frustrant de remplir un formulaire sans savoir quels champs sont obligatoires ou sans connaître les contraintes de ces champs. Par exemple, vous saisissez un nom d'utilisateur et envoyez un formulaire, pour vous rendre compte que les noms d'utilisateur doivent comporter au moins huit caractères.
Vous pouvez aider les utilisateurs à y parvenir en définissant des règles de validation et en les communiquant.
Aider les utilisateurs à éviter de manquer accidentellement des champs obligatoires
Vous pouvez utiliser le langage HTML pour spécifier le format et les contraintes corrects des 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 vous informant que le champ est obligatoire est-il joint à la <input> ?
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 une adresse e-mail obligatoire, <input>.
Essayez d'envoyer ce formulaire sans saisir de données. Y a-t-il des différences avec la version de démonstration précédente ? Saisissez votre nom dans le champ "Adresse e-mail" et essayez de valider. Un autre message d'erreur 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 présenté dans l'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 indiquer 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.
Pour obtenir 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 l'élément id de la forme.
Attribut de motif
Vous pouvez parfois avoir besoin de définir des règles de validation plus avancées.
Là encore, vous pouvez utiliser un attribut HTML.
Elle est appelée pattern. Vous pouvez définir une expression régulière comme valeur.
<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">
Ici, seules les lettres minuscules sont autorisées. L'utilisateur doit saisir au moins deux caractères et pas plus de vingt caractères.
Comment modifieriez-vous le pattern pour autoriser aussi les lettres majuscules ?
Essayer
La bonne réponse est pattern="[a-zA-Z]{2,20}".
Ajouter des styles
Vous savez maintenant comment ajouter une validation en HTML. Ne serait-il pas idéal de pouvoir également appliquer un style aux commandes de formulaire en fonction de l'état de validation ? C'est possible avec les CSS.
Appliquer un style à un champ de formulaire obligatoire
Montrez à l'utilisateur qu'un champ est obligatoire avant qu'il n'interagisse avec votre formulaire.
Vous pouvez appliquer un style aux champs required à l'aide de la pseudo-classe CSS :required.
input:required {
border: 2px solid;
}
Style des commandes de formulaire non valides
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 formidable 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 moyens d'adapter vos styles en fonction de la validation. Dans le module CSS, vous découvrirez comment appliquer un style aux formulaires.
Validation avec JavaScript
Pour améliorer davantage la validation de vos formulaires, vous pouvez utiliser l'API JavaScript Constraint Validation.
Fournir des messages d'erreur pertinents
Comme nous l'avons vu précédemment, les messages d'erreur ne sont pas identiques dans tous les navigateurs. Comment faire pour diffuser le même message auprès de tous les utilisateurs ?
Pour ce faire, utilisez la méthode 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 dans lequel vous souhaitez définir le message d'erreur personnalisé.
Écouter l'événement invalid de l'élément défini
Vous définissez alors le message avec setCustomValidity().
Cet exemple montre le message Please enter your name. si l'entrée n'est pas valide.
Ouvrez la démonstration dans différents navigateurs. Le même message doit s'afficher partout. Supprimez maintenant le JavaScript, puis réessayez. Les messages d'erreur par défaut s'affichent à nouveau.
L'API Constraint Validation vous offre bien d'autres possibilités. Vous trouverez des informations détaillées sur l'utilisation de la validation avec JavaScript dans un prochain module.
Validation en temps réel
Vous pouvez ajouter une validation en temps réel dans JavaScript en écoutant l'événement onblur d'une commande de formulaire, puis valider immédiatement la saisie lorsqu'un utilisateur quitte un champ de formulaire.
Cliquez sur le champ du formulaire dans la démonstration, saisissez "web" et cliquez ailleurs sur la page.
Le message d'erreur natif pour minlength s'affiche sous le champ du formulaire.
Vous découvrirez comment implémenter la validation en temps réel avec JavaScript dans un prochain module.
Testez vos connaissances
Tester vos connaissances sur la validation des formulaires
Quel attribut utilisez-vous pour rendre les éléments de contrôle des formulaires obligatoires ?
requiredneededessentialobligatoryEst-il possible de définir vos propres messages d'erreur ?
message.:invalid.Vous pouvez envoyer une <input> avec type="email" et l'attribut required: