La validation est le processus garantissant que les données sont correctes et complètes.
Dans un exemple réel, supposons un site qui nécessite un formulaire d'inscription à remplir avant d'obtenir un accès complet à ce site. La page d'inscription aurait des champs de saisie pour le nom d'utilisateur, le mot de passe, l'identifiant de messagerie, etc.
Lorsque l'utilisateur soumet le formulaire, une validation se produit normalement avant que les détails ne soient envoyés au serveur. Cette validation essaierait de garantir, dans la meilleure mesure possible, que les détails des champs de saisie sont saisis de la bonne manière.
Par exemple, l'adresse e-mail doit toujours être au format Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer JavaScript pour le visualiser. ; si quelqu'un entre uniquement le nom d'utilisateur dans l'identifiant de messagerie, la validation devrait idéalement échouer. La validation consiste donc à effectuer ces vérifications de base avant que les détails ne soient envoyés au serveur pour un traitement ultérieur.
Dans ce didacticiel, vous apprendrez-
- Validation de formulaire à l'aide de HTML5
- Validation du formulaire en utilisant $ dirty, $ valid, $ invalid, $ pristine
- Validation de formulaire à l'aide de la validation automatique AngularJS
- Commentaires des utilisateurs avec les boutons Ladda
Validation de formulaire à l'aide de HTML5
La validation de formulaire est le processus de pré-validation des informations saisies sur un formulaire Web par l'utilisateur avant qu'elles ne soient envoyées au serveur. Il est toujours préférable de valider les informations du côté client lui-même. En effet, cela ajoute moins de frais généraux si l'utilisateur devait à nouveau se voir présenter le formulaire si les informations saisies étaient erronées.
Voyons comment la validation de formulaire peut être effectuée en HTML5.
Dans notre exemple, nous montrerons un formulaire d'inscription simple à l'utilisateur dans lequel l'utilisateur doit entrer des détails tels qu'un nom d'utilisateur, un mot de passe, un identifiant de messagerie et l'âge.
Le formulaire aura des contrôles de validation pour s'assurer que l'utilisateur entre les informations de manière appropriée.
Event Registration Guru99 Global Event
Explication du code:
- Pour le type d'entrée de texte, nous utilisons l'attribut «obligatoire». Cela signifie que la zone de texte ne peut pas être vide lorsque le formulaire est soumis et qu'une sorte de texte doit être présente dans la zone de texte.
- Le type d'entrée suivant est le mot de passe. Étant donné que le type d'entrée est marqué comme mot de passe, lorsque l'utilisateur entre du texte dans le champ, il sera masqué.
- Étant donné que le type d'entrée est spécifié comme e-mail, le texte de la zone doit correspondre au modèle. Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer JavaScript pour le visualiser. .
- Lorsque le type d'entrée est marqué comme un nombre, si un utilisateur tente de saisir un caractère à l'aide du clavier ou de l'alphabet, il ne sera pas entré dans la zone de texte.
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
Pour voir la validation du formulaire en action, cliquez sur le bouton Soumettre sans saisir aucune information à l'écran.
Après avoir cliqué sur le bouton Soumettre, une fenêtre contextuelle apparaîtra indiquant une erreur de validation indiquant que le champ doit être rempli.
Ainsi, la validation du contrôle qui a été marqué comme requis, provoque l'affichage du message d'erreur si l'utilisateur n'entre aucune valeur dans le champ de texte.
Lorsque l'utilisateur entre une valeur dans le contrôle de mot de passe, vous remarquerez le symbole «*» utilisé pour masquer les caractères saisis.
Entrons ensuite un mauvais identifiant de messagerie et cliquez sur le bouton Soumettre. Après avoir cliqué sur le bouton Soumettre, une fenêtre contextuelle apparaîtra indiquant une erreur de validation indiquant que le champ doit avoir le symbole @.
Ainsi, la validation du contrôle qui a été marqué comme contrôle d'e-mail provoquera l'affichage du message d'erreur si l'utilisateur n'entre pas un identifiant d'e-mail approprié dans le champ de texte.
Enfin, lorsque vous essayez d'entrer des caractères dans le contrôle de texte d'âge, il ne sera pas entré à l'écran. Le contrôle ne remplira avec une valeur que lorsqu'un nombre est entré dans le contrôle.
Validation du formulaire en utilisant $ dirty, $ valid, $ invalid, $ pristine
AngularJS fournit ses propriétés supplémentaires pour la validation. AngularJS fournit les propriétés suivantes pour les contrôles à des fins de validation
- $ dirty - L'utilisateur a interagi avec le contrôle
- $ valid - Le contenu du champ est valide
- $ invalid - Le contenu du champ n'est pas valide
- $ pristine - L'utilisateur n'a pas encore interagi avec le contrôle
Vous trouverez ci-dessous les étapes à suivre pour effectuer la validation angulaire.
Étape 1) Utilisez la propriété no validate lors de la déclaration du formulaire. Cette propriété indique à HTML5 que la validation serait effectuée par AngularJS.
Étape 2) Assurez-vous que le formulaire a un nom défini pour lui. La raison en est que, lors de l'exécution de la validation angulaire, le nom du formulaire sera utilisé.
Étape 3) Assurez-vous que chaque contrôle a également un nom défini pour lui. La raison en est que, lors de l'exécution de la validation angulaire, le nom du contrôle sera utilisé.
Étape 4) Utilisez la directive ng-show pour vérifier les propriétés $ dirty, $ invalid et $ valid des contrôles.
Regardons un exemple, qui incorpore les étapes mentionnées ci-dessus.
Dans notre exemple,
Nous allons simplement avoir un champ de texte simple dans lequel l'utilisateur doit entrer un nom de sujet dans la zone de texte. Si cela n'est pas fait, une erreur de validation sera déclenchée et le message d'erreur sera affiché à l'utilisateur.
Event Registration Guru99 Global Event
Explication du code:
- Notez que nous avons donné un nom pour le formulaire qui est "myForm". Ceci est requis lors de l'accès aux contrôles sur le formulaire pour la validation AngularJS.
- Utilisation de la propriété "novalidate" pour s'assurer que le formulaire HTML permet à AngularJS d'effectuer la validation.
- Nous utilisons la directive ng-show pour vérifier les propriétés "$ dirty" et "$ invalid". Cela signifie que si la zone de texte a été modifiée, la valeur de la propriété "$ dirty" sera vraie. De plus, dans le cas où la valeur de la zone de texte est nulle, la propriété "$ invalid" deviendra vraie. Donc, si les deux propriétés sont vraies, la validation échouera pour le contrôle. Par conséquent, si les deux valeurs sont vraies, le ng-show deviendra également vrai et le contrôle d'étendue avec les caractères de couleur rouge sera affiché.
- Dans ce cas, nous vérifions la propriété "$ error" qui prend également la valeur true car nous avons mentionné pour le contrôle que la valeur doit être entrée pour le contrôle. Dans un tel cas, où aucune donnée n'est entrée dans la zone de texte, le contrôle span affichera le texte «Le nom d'utilisateur est requis».
- Si la valeur du contrôle de zone de texte n'est pas valide, nous souhaitons également désactiver le bouton d'envoi afin que l'utilisateur ne puisse pas soumettre le formulaire. Nous utilisons la propriété "ng-disabled" pour que le contrôle effectue cette opération en fonction de la valeur conditionnelle des propriétés "$ dirty" et "$ invalid" du contrôle.
- Dans le contrôleur, nous définissons simplement la valeur initiale de la valeur de la zone de texte sur le texte 'AngularJS'. Ceci est simplement fait pour définir une valeur par défaut dans la zone de texte lorsque le formulaire est affiché pour la première fois. Il montre mieux comment la validation se produit pour le champ de zone de texte.
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
Lorsque le formulaire est initialement affiché, la zone de texte affiche la valeur de "AngularJS" et le "bouton soumettre" est activé. Dès que vous supprimez le texte du contrôle, le message d'erreur de validation est activé et le bouton Soumettre est désactivé.
La capture d'écran ci-dessus affiche deux choses
- Le bouton Soumettre est désactivé
- Il n'y a pas de nom de sujet dans la zone de texte Sujet. Par conséquent, il déclenche le message d'erreur «Le nom d'utilisateur est requis».
Validation de formulaire à l'aide de la validation automatique AngularJS
Il existe une fonctionnalité dans AngularJS pour avoir validé automatiquement tous les contrôles sur un formulaire sans avoir besoin d'écrire du code personnalisé pour la validation. Cela peut être fait en incluant un module personnalisé appelé «jcs-AutoValidate».
Avec ce module en place, vous n'avez pas besoin de placer de code spécial pour effectuer la validation ou afficher les messages d'erreur. Tout cela est géré par le code à l'intérieur du JCS-AutoValidate.
Regardons un exemple simple de la façon d'y parvenir.
Dans cet exemple,
Nous allons simplement avoir un formulaire simple avec un contrôle de zone de texte qui est un champ obligatoire. Un message d'erreur doit s'afficher si ce champ n'est pas renseigné.
Event Registration Guru99 Event
Explication du code:
- Tout d'abord, nous devons inclure le script "jcs-auto-validate.js" qui a toutes les fonctionnalités de validation automatique.
- Nous devons nous assurer que chaque élément comprenant la "balise div" est placé dans une classe "form-group".
- Vous devez également vous assurer que chaque élément (qui est un élément HTML tel que le contrôle d'entrée, le contrôle d'étendue, le contrôle div, etc.), comme les contrôles d'entrée, est également placé dans la classe form-group.
- Incluez le jcs-autovalidate dans votre module AngularJS JS.
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
Par défaut, lorsque vous exécutez votre code, le formulaire ci-dessus sera affiché selon le code HTML.
Si vous essayez de soumettre le formulaire, le message d'erreur apparaîtra disant: «Ce champ est obligatoire». Tout cela est fait par l'option JCS-AutoValidate.
Commentaires des utilisateurs avec les boutons Ladda
Les boutons "ladda" sont un cadre spécial construit pour les boutons au-dessus de JavaScript afin de donner un effet visuel aux boutons lorsqu'ils sont pressés.
Donc, si un bouton reçoit l'attribut "ladda" et est pressé, un effet de rotation sera affiché. En outre, différents styles de données sont disponibles pour le bouton afin de fournir des effets visuels supplémentaires.
Regardons un exemple de la façon de voir les boutons "ladda" en action. Nous allons simplement voir un formulaire simple qui a un bouton d'envoi. Lorsque le bouton est enfoncé, un effet de rotation sera affiché sur le bouton.
Event Registration Guru99 Event
Explication du code:
- Nous utilisons la directive "ng-submit" pour appeler une fonction appelée "submit". Cette fonction sera utilisée pour changer l'attribut ladda du bouton d'envoi.
- L'attribut ladda est un attribut spécial du framework ladda. C'est cet attribut qui ajoute l'effet de rotation au contrôle. Nous définissons la valeur de l'attribut ladda sur la variable soumise.
- La propriété de style de données est à nouveau un attribut supplémentaire offert par le framework ladda, qui ajoute simplement un effet visuel différent au bouton d'envoi.
- Le module 'AngularJS-ladda' doit être ajouté à l'application AngularJS.JS pour que le framework ladda fonctionne.
- Au départ, nous définissons et définissons la valeur d'une variable appelée «soumission» sur false. Cette valeur est définie pour l'attribut ladda du bouton d'envoi. En définissant initialement ceci sur false, nous disons que nous ne voulons pas que le bouton d'envoi ait l'effet ladda pour le moment.
- Nous déclarons une fonction qui est appelée lorsque le bouton d'envoi est enfoncé. Dans cette fonction, nous définissons la «soumission» sur true. Cela entraînera l'application de l'effet ladda au bouton d'envoi.
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
Lorsque le formulaire est initialement affiché, le bouton Soumettre s'affiche sous sa forme simple.
Lorsque vous appuyez sur le bouton de soumission, la variable de soumission dans le contrôleur est définie sur true. Cette valeur est transmise à l'attribut "ladda" du bouton d'envoi qui provoque l'effet de rotation du bouton.
Résumé
- La validation des contrôles HTML de la zone de texte peut être effectuée à l'aide de l'attribut «obligatoire».
- En HTML5, de nouveaux contrôles ont été ajoutés, tels que le mot de passe, l'adresse e-mail et le numéro, qui fournissent leur propre ensemble de validations.
- La validation de formulaire dans AngularJS est prise en charge en examinant les valeurs $ dirty, $ valid, $ invalid et $ pristine d'un contrôle de formulaire.
- La validation automatique dans les applications AngularJS peut également être réalisée en utilisant le module de validation automatique JCS.
- Les boutons Ladda peuvent être ajoutés à une application Angular.js pour donner un peu une sensation visuelle améliorée à l'utilisateur lorsque le bouton est enfoncé.