L'un des points les plus importants du développement Web et qui est parfois négligé ou n'est pas pris en compte est la validation de formulaire et des champs qui les composent, ces validations vont des valeurs qu'elles peuvent accepter, leur longueur au fait qu'elles soient nécessaires ou non.
Ces validations de la côté client dans le passé, ils étaient effectués par Javascript construire des fonctions lourdes pour valider quelques champs et obtenir des résultats pas toujours les plus optimaux, il a également été choisi pour valider les du côté serveur mais cela n'a pas donné à l'utilisateur une expérience conviviale car nous devions d'abord traiter les données et attendre la réponse du serveur pour vérifier que toutes nos données étaient correctes.
Après avoir travaillé soigneusement avec Javascript Pour effectuer toutes sortes d'opérations côté client, les frameworks semblent faciliter les choses, parmi eux, l'un des plus célèbres : jQuery; Avec une structure prédéfinie et une façon de faire plus propre et plus optimale, il était possible de sortir de toutes les mauvaises pratiques et de donner au développeur un outil beaucoup plus complet pour réaliser ces opérations, y compris les validations.
Mais même si jQuery facilité de nombreuses opérations côté client, quelque chose n'avait pas encore été développé qui attaquerait directement la question des validations, c'est pourquoi le plugin de Validateur d'amorçage qui utilise tous les avantages de jQuery et le cadre de HTML5 Oui CSS3, Amorcer.
1. Validateur d'amorçage
Validateur d'amorçage est un plugin basé sur jQuery Oui Amorcer, il permet de valider les formulaires, ainsi que les éléments qu'ils contiennent avec une simple inclusion des bibliothèques de plugins et l'utilisation de son puissant mais simple API, ceci sans oublier toutes les caractéristiques dont il dispose, voyons quelques-unes d'entre elles :
- Intégration avec les polices et les styles Amorcer.
- Validations de champs prédéfinies qui incluent : la longueur du contenu, les dates, les cartes de crédit, les téléphones, les e-mails, entre autres.
- Validations personnalisées pour les champs.
- Possibilité d'ajouter plusieurs validations par champ.
- Possibilité d'afficher une icône de retour en fonction du résultat de la validation.
- Possibilité d'utiliser les messages dans le HTML selon le résultat de la validation.
Comme nous avons pu le voir, ces caractéristiques en font l'option numéro un à considérer pour la mise en œuvre des validations dans nos projets.
De quoi avons-nous besoin pour l'utiliser ?Pour pouvoir utiliser Validateur d'amorçage nous devons inclure jQuery dans sa dernière version de préférence, Amorcer de ta version 3.x et les fichiers .css Oui .js de la librairie. De plus, nous aurons besoin d'une installation de serveur Web comme Wamp si nous travaillons sur les fenêtres ou alors Lampe dans Linux.
2. Validateurs
Avant d'entrer dans la partie pratique de ce didacticiel, il est important de connaître certains des validateurs les plus importants qu'il utilise. Validateur d'amorçage pour le traitement des validations au sein des formulaires, voyons :
base64Valide une chaîne de caractères codée en base 64.
entreVérifiez si la valeur d'un champ est strictement comprise entre deux nombres donnés ou non.
carte de créditValider un numéro de carte de crédit.
DateValidez une date selon certaines options parmi lesquelles se démarquent le format, une date maximum, minimum et même par séparateur.
chiffresRenvoie vrai ou vrai si la valeur ne contient que des nombres.
adresse emailComme son nom l'indique, il valide une adresse email.
expression régulièreValide si la valeur donnée correspond ou correspond à une expression régulière de Javascript.
Ceci n'est qu'un petit échantillon du répertoire complet de validateurs que nous avons dans Validateur d'amorçagePour la liste complète des validateurs, nous pouvons entrer ici et cocher celui qui correspond le mieux à nos besoins :
3. Formulaire de connexion
L'un des aspects les plus importants de tout site Web actuel est la Formulaire de connexion, où nos utilisateurs peuvent entrer avec leur nom d'utilisateur et mot de passe sur notre page et profiter d'avantages supplémentaires lors de la connexion.
Validateur d'amorçage permet de valider ces deux champs avec quelques simples lignes de code, en plus Amorcer nous permet de lui donner une touche supplémentaire en nous permettant d'implémenter une fenêtre modale de manière simple, créant ainsi un formulaire de connexion qui sera professionnel et agréable à l'œil de l'utilisateur.
Comme nous n'apporterons aucune modification au code source de l'un des fichiers susmentionnés, nous les inclurons à partir de leur CDN, nous allons d'abord inclure les fichiers .css tant de Boostrap aimer Validateur d'amorçage:
Nous allons maintenant inclure les fichiers .js et pour avoir une structure beaucoup plus propre nous allons séparer le code de nos validations dans un fichier appelé validateur.js:
Ensuite, nous utiliserons les avantages de Amorcer pour construire notre fenêtre modale, qui juste en appliquant les classes nécessaires aux éléments qui la composent, la fonctionnalité souhaitée est appliquée :
Formulaire de connexion×Voyons à quoi ressemble notre exemple jusqu'à présent lorsque nous l'exécutons dans le navigateur :Login
Nom d'utilisateurMot de passeConnexion
Nous avons déjà notre fenêtre modale qui fonctionne, ainsi que notre formulaire, il ne nous reste plus qu'à inclure les validations avec Validateur d'amorçage, pour cela nous allons initialiser un document.prêt dans notre dossier validateur.js et à l'intérieur de celle-ci, nous appellerons la méthode boostrapValidator ():
$ ('# loginForm'). }, champs : {utilisateur : {validateurs : {notEmpty : {message : 'Le nom d'utilisateur est requis'}}}, mot de passe : {validateurs : {notEmpty : {message : 'Le mot de passe est requis'}}}}} ); La première chose que nous devons remarquer dans ce code est l'utilisation du sélecteur pour initialiser la méthode, dans ce cas nous utilisons l'ID du formulaire qui est appelé Formulaire de connexion, ceci pour passer par le arbre DOM et accédez aux éléments situés en dessous dans la hiérarchie. Nous définissons ensuite un message général et les icônes de retour, afin de donner une touche visuelle à notre formulaire en cas de succès ou d'erreur dans les validations.
Enfin nous avons nos validations et comment nous pouvons voir d'un coup d'oeil c'est quelque chose d'extrêmement lisible et d'une simplicité inégalée, nous indiquons le nom des champs de nos formulaires et dans cet exemple nous utiliserons une seule validation qui sera celle du champ obligatoire, mais comme nous l'avons commenté, il peut y en avoir plus d'un par champ.
Voyons dans l'image suivante à quoi ressemble notre formulaire lorsque nous essayons d'envoyer les informations sans avoir rempli les champs :
Comment nous voyons nos validations fonctionner et tant que les informations ne sont pas saisies dans les champs, le formulaire n'effectuera pas le nous faire parvenir Étant donné que le bouton est désactivé par défaut, voyons dans l'image suivante à quoi ressemble notre formulaire lorsque nous saisissons les données nécessaires et que les icônes de commentaires changent en conséquence :
En quelques minutes, nous avons pu créer un formulaire de connexion avec ses validations respectives côté client grâce à Validateur d'amorçage.
4. Formulaire d'inscription
Le cas précédent est simple et assez utile mais il n'est pas le seul présent dans les développements, il existe des formulaires d'inscription qui contiennent beaucoup plus de champs et les restrictions concernant les informations à saisir sont différentes.
Cela posait problème dans le passé car selon le nombre de champs, un compteur devait être effectué et validé champ par champ et lorsque ce compteur atteignait un certain nombre cela signifiait qu'il n'y avait pas d'erreurs, ceci sans oublier les validations individuelles de chaque champ, comme les formats de date, qui n'accepteront que des nombres ou même la longueur du champ.
Avec Validateur Boostrap et ses validateurs prédéfinis nous aident dans cette tâche de manière simple et rapide, voyons :
Nous allons d'abord inclure les fichiers .css Oui .js que nous avons utilisé dans l'exemple précédent, nous inclurons en plus des bibliothèques pour pouvoir utiliser le sélecteur de date de Boostrap :
Une fois cela fait, nous construisons notre formulaire et donnons à chaque champ un nom approprié :
Voyons à quoi ressemble ce formulaire dans notre navigateur :Formulaire d'inscription
NomsNoms de familleCourrier électroniqueMot de passeDate de naissance*****HommeFémininTéléphoneTéléphone portableEnregistrement
Avant de passer aux validations, il est important que nous mettions notre sélecteur de date pour cela, il suffit d'inclure les lignes de code suivantes dans notre fichier validateur.js et donnez-lui l'ID que possède notre champ sous la forme :
$ (function () {$ ('# datetimepicker').datetimepicker ({pickTime: false});}); Voyons à quoi ressemble ce plugin :
Comme nous avons pu le voir, le formulaire comporte des champs mixtes, notamment du texte, des champs de mot de passe, un sélecteur de date et même des boutons radio, mais ce n'est pas un problème pour Validateur d'amorçage, nous utiliserons notre même fichier validateur.js pour les validations il suffit d'effectuer une nouvelle instance de la méthode boostrapValidateur avec l'ID du nouveau formulaire et y inclure le même :
$ ('# registrationForm'). {notEmpty : {message : 'Le prénom est requis'}}}, nom de famille : {validateurs : {notEmpty : {message : 'Last name is required'}}}, e-mail : {validateurs : {notEmpty : {message : ' L'email est obligatoire et ne peut pas être vide '}, emailAddress : {message :' stringLength : {min : 8, message : 'Le mot de passe doit contenir au moins 8 caractères'}}}, datetimepicker : {validators : {notEmpty : {message : 'La date de naissance est obligatoire et ne peut pas être vide'} , date : {format : 'AAAA-MM-JJ', message : 'La date de naissance n'est pas valide'}}}, ***** : {validateurs : {pasVide : {message : 'Le ***** est requis '}}}, téléphone : {message :' Le téléphone ou n'est pas valide ', validateurs : {notEmpty : {message :' Le téléphone est obligatoire et ne peut pas être vide '}, regexp : {regexp : / [0-9] + $ /, message :' Le téléphone ne peut être contiennent des chiffres'}}}, telefono_cel : {message : 'Le téléphone n'est pas valide', validateurs : {regexp : {regexp : / [0-9] + $ /, message : 'Le téléphone ne peut contenir que des chiffres'} }},}}); Nous pouvons voir que pour les deux premières validations elles sont similaires à l'exemple précédent mais lorsque nous trouvons le champ email, nous voyons qu'il a la validation du champ requis et en plus avec le validateur adresse email Nous vérifions qu'il s'agit d'un email valide, voyons comment se comporte cette validation :
Avec les sélecteur de date Nous n'avons aucun problème à saisir les dates, cependant si nous voulons recevoir cela de la manière la plus propre possible, nous pouvons valider le format comme nous pouvons le voir dans la validation suivante où nous indiquons que le format doit être AAAA-MM-JJ ce qui est valable pour :
Nous pouvons même valider avec combien de caractères le mot de passe peut contenir Longueur de chaine et la possibilité de min:
Pour finir et démontrer la puissance de ce plugin nous allons valider le téléphone, nous pourrions utiliser le validateur de chiffres mais dans ce cas nous utiliserons quelque chose de plus complexe comme une expression régulière et le meilleur de tous est que nous avons déjà un validateur pour que le expression régulière, Voyons comment cela fonctionne dans notre formulaire :
Après avoir déjà testé que toutes nos validations fonctionnent correctement, nous allons corriger toutes les informations de notre formulaire et voir à quoi cela ressemble avec les informations appropriées :
Avec cela, nous terminons ce tutoriel, dans lequel nous avons appris à utiliser les validations de Validateur Boostrap, un plugin puissant qui ne nécessite ni installation ni configuration et qui nous permet de valider nos formulaires rapidement et facilement avec quelques simples lignes de code.
