Dans notre précédent tutoriel, nous avons discuté de la façon de mettre en œuvre une validation de formulaire de base en utilisant certains attributs de saisie en HTML5 et un peu de regex.
-
HTML5Validation de formulaire en utilisant uniquement HTML5 et RegexMonty Shokeen
Dans ce tutoriel, vous apprendrez à utiliser un plugin jQuery pour ajouter la validation de formulaire à votre site Web.
L’utilisation d’un plugin jQuery pour valider les formulaires sert à beaucoup de choses. Il vous donne des capacités supplémentaires comme l’affichage facile de messages d’erreur personnalisés et l’ajout d’une logique conditionnelle à la validation des formulaires. Une bibliothèque de validation peut également vous aider à ajouter la validation à vos formulaires HTML en modifiant peu ou pas du tout le balisage. Les conditions de validité peuvent également être ajoutées, supprimées ou modifiées à tout moment avec facilité.
Démarrer
Nous utiliserons le plugin de validation jQuery dans ce tutoriel. Le plugin offre de nombreuses fonctionnalités et vous aide également à définir votre propre logique de validation.
Avant de pouvoir commencer à utiliser le plugin dans nos champs, nous devons inclure les fichiers nécessaires dans notre projet. Il y a deux fichiers différents à inclure. Le premier est le fichier core, qui comprend les fonctionnalités de base du plugin, y compris tout, des différentes méthodes de validation à certains sélecteurs personnalisés. Le second fichier contient des méthodes supplémentaires pour valider des entrées comme les numéros de carte de crédit et les numéros de téléphone basés aux États-Unis.
Vous pouvez ajouter ces fichiers à vos projets via des gestionnaires de paquets comme Bower ou NPM. Vous pouvez aussi simplement obtenir directement un lien CDN vers les fichiers et les ajouter à une balise script sur votre page web. Comme il s’agit d’un plugin basé sur jQuery, vous devrez également ajouter un lien vers la bibliothèque jQuery.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
Une fois que vous avez ajouté ces fichiers, vous pouvez commencer à valider tout formulaire avec la méthode validate.
Validation de votre premier formulaire
Vous pouvez commencer à utiliser ce plugin sans apporter de modifications importantes à votre balisage. La seule chose que vous pourriez avoir à changer est d’ajouter un id ou class au formulaire que vous voulez valider s’il n’en a pas déjà un.
Voici le balisage d’un formulaire de base que nous allons valider à l’aide du plugin jQuery validate.
<form action="" method="post"><p><label for="name">Name <span>(required, at least 3 characters)</span></label><input name="name" minlength="3" type="text" required></p><p><label for="email">E-Mail <span>(required)</span></label><input type="email" name="email" required></p><p><input class="submit" type="submit" value="SUBMIT"></p></form>
Nous utilisons les mêmes attributs que ceux utilisés dans notre précédent tutoriel de validation de formulaire basé sur HTML5. Le formulaire effectuera toujours la validation sans que nous n’ayons à ajouter aucun JavaScript. Cependant, l’utilisation du plugin pour la validation nous permettra d’afficher les messages d’erreur juste en dessous du champ de saisie invalide. Nous pourrons également styliser les erreurs comme nous le souhaitons.
Pour commencer à valider le formulaire avec ce plugin, il suffit d’ajouter le code JavaScript suivant sur la page Web :
$(document).ready(function() {$("#basic-form").validate();});
Ceci est basé sur l’hypothèse que vous avez déjà ajouté les fichiers JavaScript requis. L’ajout de ces lignes de JavaScript fera en sorte que votre formulaire soit correctement validé et affiche tous les messages d’erreur. Voici une démo fonctionnelle.
La bibliothèque essaie d’être aussi conviviale que possible en n’affichant les messages d’erreur que lorsqu’ils sont nécessaires. Par exemple, si vous passez par la tabulation dans les champs de nom et d’email sans réellement saisir d’informations, vous n’obtiendrez aucun message d’erreur. Toutefois, si vous essayez de passer au champ de l’adresse électronique après avoir saisi un seul caractère dans le champ du nom, vous obtiendrez un message d’erreur vous demandant de saisir au moins trois caractères.
Les messages d’erreur sont injectés dans le DOM à l’aide de l’élément label. Ils possèdent tous une classe error, il est donc facile d’appliquer votre propre style, comme nous l’avons fait dans notre exemple. Il en va de même pour les entrées invalides, qui se voient également ajouter une classe error.
Options pour la méthode validate()
Dans notre exemple précédent, nous avons simplement appelé la méthode validate() sans lui transmettre d’options. Cependant, nous pouvons également passer un objet à cette méthode ainsi que de nombreuses options à l’intérieur de cet objet. La valeur de ces options déterminera comment le plugin de formulaire gère la validation, les erreurs, etc.
Si vous voulez que ce plugin ignore certains éléments pendant le processus de validation, vous pouvez le faire facilement en passant une classe ou un sélecteur à ignore(). Le plugin ignorera tous les éléments de formulaire avec ce sélecteur particulier lorsqu’il validera la saisie.
Ajouter des règles de validation pour les champs de saisie
Vous pouvez également passer certaines règles à la méthode validate() afin de déterminer comment les valeurs de saisie sont validées. La valeur du paramètre rules doit être un objet contenant des paires clé-valeur. La clé dans chaque cas est le nom de l’élément que nous voulons valider. La valeur de cette clé est un objet qui contient un ensemble de règles qui seront utilisées pour la validation.
Vous pouvez également ajouter une logique conditionnelle aux différents champs que vous validez en utilisant le mot-clé depends et en lui passant une fonction de rappel qui renvoie soit true soit false. Voici un exemple qui utilise des règles simples pour définir comment l’entrée est validée.
$(document).ready(function() {$("#basic-form").validate({rules: {name : {required: true,minlength: 3},age: {required: true,number: true,min: 18},email: {required: true,email: true},weight: {required: {depends: function(elem) {return $("#age").val() > 50}},number: true,min: 0}}});});
Dans le bout de code ci-dessus, les clés nameageemail et weight sont simplement les noms des éléments d’entrée. Chaque clé a un objet comme valeur, et les paires clé-valeur dans l’objet déterminent comment un champ de saisie sera validé.
Ces options de validation sont similaires aux attributs que vous pouvez ajouter dans le balisage d’un formulaire. Par exemple, définir required à true rendra l’élément obligatoire pour la soumission du formulaire. Si vous attribuez à minlength une valeur comme 3, vous obligerez les utilisateurs à saisir au moins 3 caractères dans le champ de saisie. Il existe quelques autres méthodes de validation intégrées qui sont brièvement décrites sur la page de documentation.
Une chose que vous devez noter dans le code ci-dessus est l’utilisation de depends pour faire conditionnellement du poids un champ obligatoire si l’âge est supérieur à 50 ans. Cela se fait en renvoyant true dans la fonction de rappel si la valeur saisie dans le champ de saisie age est supérieure à 50.
Créer vos propres messages d’erreur
Ce plugin vous permet également de définir des messages d’erreur pour différentes règles de validation dans un formulaire. Vous commencez par définir la valeur de la clé messages sur un objet contenant des paires clé-valeur pour les champs de saisie et les messages d’erreur correspondants.
Voici un exemple qui affichera des messages d’erreur personnalisés pour chaque champ de saisie.
messages : {name: {minlength: "Name should be at least 3 characters"},age: {required: "Please enter your age",number: "Please enter your age as a numerical value",min: "You must be at least 18 years old"},email: {email: "The email should be in the format: [email protected]"},weight: {required: "People with age over 50 have to enter their weight",number: "Please enter your weight as a numerical value"}}
Tout comme les règles, messages s’appuient sur le nom des champs de saisie. Chacun de ces champs de saisie acceptera un objet avec des paires clé-valeur comme valeur. Dans chaque cas, la clé est la règle de validation qui doit être suivie. La valeur est simplement le message d’erreur que vous souhaitez afficher si une règle particulière est violée.
Par exemple, le champ de saisie age déclenchera le message d’erreur required s’il est laissé vide. Cependant, il déclenchera l’erreur number si vous saisissez autre chose qu’un nombre dans le champ de saisie.
Une chose que vous remarquerez est que le plugin affichera un message d’erreur générique pour les règles de validation où vous n’avez pas fourni de message d’erreur personnalisé. Essayez de remplir différentes valeurs dans la démo suivante et vous verrez que les messages d’erreur personnalisés et génériques s’affichent comme prévu.
Personnaliser l’apparence des messages d’erreur
Il y a des moments où vous pourriez vouloir ajouter vos propres classes aux entrées valides et invalides afin de les cibler plus spécifiquement ou pour une meilleure intégration avec un thème existant.
Vous pouvez modifier les classes qui sont ajoutées aux éléments de saisie valides ou invalides à l’aide des clés errorClass et validClass. Cela peut permettre d’éviter certains heurts indésirables dus à la réutilisation du même nom de classe. Par défaut, la classe error est attribuée à chaque élément de saisie et étiquette non valide. La classe valid est attribuée à chaque élément de saisie valide.
Il est important de se rappeler que la définition de errorClass à quelque chose comme fail-alert supprimera la classe error des éléments invalides. Vous devrez utiliser errorClass: "error fail-alert" pour affecter plusieurs classes à un même élément. Il en va de même pour validClass.
Il n’y a pas d’étiquettes supplémentaires ajoutées au formulaire lorsque les utilisateurs saisissent une entrée valide. Ainsi, les classes de validClass sont affectées à l’élément de saisie valide.
L’extrait de code suivant s’appuie sur l’exemple précédent pour ajouter des classes CSS et un style personnalisés aux éléments invalides et valides.
Le seul code JavaScript supplémentaire est utilisé pour affecter les classes.
$(document).ready(function() {$("#basic-form").validate({errorClass: "error fail-alert",validClass: "valid success-alert",// ... More validation code from previous example
Voici le CSS que nous utiliserons pour modifier l’apparence des messages d’erreur :
label.error.fail-alert {border: 2px solid red;border-radius: 4px;line-height: 1;padding: 2px 0 6px 6px;background: #ffe6eb;}input.valid.success-alert {border: 2px solid #4CAF50;color: green;}
En plus de personnaliser les messages d’erreur, nous ajoutons également notre propre style aux éléments de saisie valides. Voici une démo CodePen pour nous montrer le résultat final.
Plus d’options pour modifier le comportement du plugin
Vous pouvez empêcher le plugin de valider les champs de saisie lors de l’activation d’une touche, d’un clic, et autres événements de ce type en définissant la valeur de onfocusoutonkeyup, ou onclickfalse. Gardez à l’esprit que le booléen true n’est pas une valeur valide pour ces clés. Cela signifie essentiellement que si vous voulez que le plugin valide ou perde le focus sur un événement de remontée de touche, il suffit de ne pas toucher à ces options.
Vous avez également la possibilité de modifier l’élément dans lequel l’erreur apparaît. Par défaut, le plugin utilise l’élément label pour afficher tous les messages d’erreur, mais vous pouvez le changer pour em ou tout autre élément en utilisant la touche errorElement. L’élément d’erreur lui-même peut ensuite être enveloppé dans un autre élément HTML à l’aide de la clé wrapper.
Ce sont là quelques-unes des options les plus courantes que vous êtes susceptible d’utiliser lors de la validation de formulaires. Cependant, il existe d’autres options de validation qui pourraient s’avérer pratiques si vous voulez faire quelque chose comme modifier le placement des messages d’erreur ou les regrouper.
Pensées finales
Dans ce tutoriel, nous avons appris à faire passer notre validation de formulaire au niveau supérieur en utilisant un plugin jQuery. L’utilisation de la validation de formulaire JavaScript nous donne beaucoup de contrôle supplémentaire par rapport à la validation HTML de base. Par exemple, vous pouvez facilement contrôler comment et quand différents messages d’erreur apparaissent lorsqu’une entrée est remplie de valeurs non valides. De même, vous pouvez également spécifier si le plugin doit ignorer la validation pour certains éléments particuliers. Je vous recommande vivement de lire la documentation de ce plugin et quelques bonnes pratiques sur la façon de l’utiliser correctement.
Dans notre prochain tutoriel, vous découvrirez d’autres outils et plugins basés sur JavaScript pour vous aider à créer et valider facilement des formulaires.
Et pendant que vous êtes ici, consultez certains de nos autres articles sur les formulaires JavaScript et la validation des formulaires !
-
HTML5Validation des entrées de formulaire en utilisant uniquement HTML5 et RegexMonty Shokeen
-
La validation des formulaires.
Développement WebSoumettre un formulaire sans rafraîchissement de la page à l’aide de jQueryEric -
PHPPCréer un formulaire de contact en PHP. un formulaire de contact en PHPMonty Shokeen -
PHPComparaison des 5 meilleurs constructeurs de formulaires PHP (et 4 scripts gratuits).
Monty Shokeen -
JavaScriptLes meilleurs formulaires JavaScript de 2019Monty Shokeen
.