Validation du formulaire AngularJS lors de la soumission : exemple d'inscription

Validation de formulaire dans AngularJS

Validation du formulaire dans AngularJS est le processus permettant de garantir si les données saisies dans un formulaire sont correctes et complètes. Lorsqu'un utilisateur soumet le formulaire, la validation a lieu avant la validation.tails sont envoyés au serveur. Le processus de validation garantit, dans la mesure du possible, que letails car les champs de saisie sont saisis de la bonne manière.

Dans un exemple concret, supposons un site qui nécessite de remplir un formulaire d'inscription 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, etc.mail identifiant et ainsi de suite.

Par exemple, le email l'identifiant doit toujours être au format : nom d'utilisateur@site.domaine; si quelqu'un entre juste le nom d'utilisateur dans le email id, alors idéalement, la validation devrait échouer. La validation consiste donc à effectuer ces vérifications de base avant le lancement.tails sont envoyés au serveur pour un traitement ultérieur.

Validation du formulaire à l'aide de HTML5

La validation du 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 côté client lui-même. En effet, cela ajoute moins de surcharge si l'utilisateur devait se voir présenter à nouveau le formulaire si les informations saisies étaient erronées.

Voyons comment la validation de formulaire AngularJS peut être effectuée en HTML5.

Dans notre exemple, nous montrerons à l'utilisateur un formulaire d'inscription simple dans lequel l'utilisateur doit saisir details comme un nom d'utilisateur, un mot de passe, etc.mail identité et âge.

Le formulaire comportera des contrôles de validation pour garantir que l'utilisateur saisit les informations de manière appropriée.

Validation du formulaire à l'aide de HTML5

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body  ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">

    <form>
        &nbsp;&nbsp;&nbsp;&nbsp;
        Enter your user name:
        <input type="text"  name="name" required><br><br>&nbsp;&nbsp;&nbsp;

        Enter your password:&nbsp;&nbsp;&nbsp;
        <input type="password"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="email"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your age:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="number" /><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="submit" value="Submit"/>
    </form>
</div>

</body>
</html>

Explication du code

  1. Pour le type de saisie de texte, nous utilisons l'attribut « obligatoire ». Cela signifie que le textebox ne peut pas être vide lorsque le formulaire est soumis, et une sorte de texte doit être présent dans le textebox.
  2. Le type d'entrée suivant est le mot de passe. Étant donné que le type de saisie est marqué comme mot de passe, lorsque l'utilisateur saisit un texte dans le champ, il sera masqué.
  3. Parce que le type d'entrée est spécifié comme email, le texte dans le box doit correspondre au modèle nom@site.domaine.
  4. Lorsque le type de saisie 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 saisi dans le texte.box.

Si le code est exécuté avec succès, la suitewing Le résultat sera affiché lorsque vous exécutez votre code dans le navigateur pour la validation du formulaire AngularJS lors de la soumission.

Sortie

Validation du formulaire à l'aide de HTML5

Pour voir la validation du formulaire en action, cliquez sur le bouton Soumettre sans saisir aucune information à l'écran.

Validation du formulaire à l'aide de HTML5

Après avoir cliqué sur le bouton Soumettre, une fenêtre contextuelle apparaîtra.wing 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 ne saisit aucune valeur dans le champ de texte.

Validation du formulaire à l'aide de HTML5

Lorsque l'utilisateur saisit une valeur dans le contrôle du mot de passe, vous remarquerez le symbole « * » utilisé pour masquer les caractères saisis.

Validation du formulaire à l'aide de HTML5

Entrons alors le mauvais email identifiant et cliquez sur le bouton Soumettre. Après avoir cliqué sur le bouton Soumettre, une fenêtre contextuelle apparaîtra.wing une erreur de validation selon laquelle le champ doit avoir le symbole @.

Donc la validation du contrôle qui a été marqué comme un email Le contrôle entraînera l'affichage du message d'erreur si l'utilisateur ne saisit pas un e approprié.mail identifiant dans le champ de texte.

Enfin, lorsque vous essayez de saisir des caractères dans le contrôle de texte d'âge, ils ne seront pas saisis à l'écran. Le contrôle ne sera renseigné avec une valeur que lorsqu'un nombre est saisi dans le contrôle.

Validation du formulaire en utilisant $dirty, $valid, $invalid, $pristine

AngularJS fournit ses propriétés supplémentaires pour validation. AngularJS fournit ce qui suitwing propriétés des contrôles à des fins de validation

  • $sale – L’utilisateur a interagi avec le contrôle
  • $valide – Le contenu du champ est valide
  • $ invalide – Le contenu du champ n'est pas valide
  • $vierge – 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. La raison en est que, lors 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 la validation angulaire, le nom du contrôle sera utilisé.

Étape 4) Utilisez l'option ng-show directive pour vérifier les propriétés $dirty, $invalid et $valid pour les contrôles.

Regardons un exemple qui intègre les étapes mentionnées ci-dessus.

Dans notre exemple,

Nous allons juste avoir un simple champ de texte dans lequel l'utilisateur doit saisir un nom de sujet dans le texte. box. Si cela n'est pas fait, une erreur de validation sera déclenchée et le message d'erreur sera affiché à l'utilisateur.

Validation du formulaire en utilisant $dirty, $valid, $invalid, $pristine

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
    <p>Topic Name:<br>
        <input type="text" name="user" ng-model="user" required>

        <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">

            <span ng-show="myForm.user.$error.required">Username is required</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
    </p>
</form>
<script>
    var app = angular.module("DemoApp",[]);

    app.controller("DemoController",function($scope) {

        $scope.Display = function () {
            $scope.user='Angular';
        }
    });
</script>
</body>
</html>

Explication du code

  1. Notez que nous avons donné un nom au formulaire qui est « myForm ». Ceci est requis lors de l'accès aux contrôles du formulaire pour la validation AngularJS.
  2. Utilisation de la propriété « novalidate » pour garantir que le formulaire HTML permet à AngularJS d'effectuer la validation.
  3. Nous utilisons la directive ng-show pour vérifier les propriétés « $dirty » et « $invalid ». Cela signifie que si le textebox a été modifié, alors la valeur de la propriété « $dirty » sera vraie. Aussi, dans le cas où le textebox la valeur est nulle, la propriété « $invalid » deviendra vraie. Ainsi, 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 span avec les caractères de couleur rouge sera affiché.
  4. En cela, nous vérifions la propriété « $error » qui est également évaluée comme vraie car nous avons mentionné pour le contrôle que cette valeur doit être saisie pour le contrôle. Dans un tel cas, où aucune donnée n'est saisie dans le texte box le contrôle span affichera le texte « Le nom d'utilisateur est requis ».
  5. Si le textebox la valeur de contrôle n'est pas valide, nous souhaitons également désactiver le bouton de soumission afin que l'utilisateur ne puisse pas soumettre le formulaire. Nous utilisons la propriété « ng-disabled » pour le contrôle pour ce faire en fonction de la valeur conditionnelle des propriétés « $dirty » et « $invalid » du contrôle.
  6. Dans le contrôleur, nous définissons simplement la valeur initiale du textebox valeur au texte 'AngularJS'. Ceci est simplement fait pour définir une valeur par défaut pour le textebox lorsque le formulaire est affiché pour la première fois. Il montre mieux comment se produit la validation du textebox champ.

Si le code est exécuté avec succès, la suitewing La sortie sera affichée lorsque vous exécutez votre code dans le navigateur.

Sortie

Validation du formulaire en utilisant $dirty, $valid, $invalid, $pristine

Lorsque le formulaire est initialement affiché, le textebox affiche la valeur de « AngularJS » et le « bouton de soumission » 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é.

Validation du formulaire en utilisant $dirty, $valid, $invalid, $pristine

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 le texte du sujet box. Par conséquent, il déclenche le message d’erreur « Le nom d’utilisateur est requis ».

Validation du formulaire à l'aide de la validation automatique AngularJS

Il existe une fonctionnalité dans AngularJS permettant de valider automatiquement tous les contrôles d'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.

Examinons un exemple simple de la façon d'y parvenir.

Dans cet exemple,

Nous allons juste avoir un formulaire simple avec un textebox contrôle qui est un champ obligatoire. Un message d'erreur doit s'afficher si ce champ n'est pas renseigné.

Validation du formulaire à l'aide de la validation automatique AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>

<div ng-app="DemoApp">
    <div class="form-group">
        <form name="myForm" novalidate>
            <p>Topic Name:<br></p>
                <div class="form-group">
            <input class="form-control" type="text" id="user" ng-model="user" required="required"/>

        </div>
            <div>
                <div class="form-group">
                    <input type="submit">
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>

Explication du code

  1. Tout d’abord, nous devons inclure le script « jcs-auto-validate.js » qui possède toutes les fonctionnalités de validation automatique.
  2. Nous devons nous assurer que chaque élément, y compris la « balise div », est placé dans une classe « form-group ».
  3. Il faut également s'assurer que chaque élément (qui est un élément HTML tel qu'un contrôle d'entrée, un contrôle span, un contrôle div, etc.) tel que les contrôles d'entrée est également placé dans la classe form-group.
  4. Incluez le jcs-autovalidate dans votre module AngularJS JS.

Si le code est exécuté avec succès, la suitewing La sortie sera affichée lorsque vous exécutez votre code dans le navigateur.

Sortie

Validation du formulaire à l'aide de la validation automatique AngularJS

Par défaut, lorsque vous exécutez votre code, le formulaire ci-dessus s'affichera selon le code HTML.

Validation du formulaire à l'aide de la validation automatique AngularJS

Si vous essayez de soumettre le formulaire, le message d'erreur apparaîtra indiquant : « Ce champ est obligatoire ». Tout cela est effectué par l'option JCS-AutoValidate.

Commentaires des utilisateurs avec les boutons Ladda

Les boutons « ladda » sont un cadre spécial conçu pour les boutons situés au-dessus de JavaScript pour donner un effet visuel aux boutons lorsqu'ils sont enfoncés.

Ainsi, si un bouton reçoit l'attribut « ladda » et est enfoncé, 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 juste voir un formulaire simple doté d’un bouton de soumission. Lorsque le bouton est enfoncé, un effet de rotation s'affichera sur le bouton.

Commentaires des utilisateurs avec les boutons Ladda

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <div class="form-group">
        <form name="myForm" novalidate ng-submit="submit()">
            <div>
                <button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
            </div>
        </form>
    </div>
</div>
<script>
    var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);

    app.controller('DemoController',function($scope) {
        $scope.submitting = false;

        $scope.submit = function () {
            $scope.submitting = true;
        }
    });
</script>
</body>
</html>

Explication du code

  1. Nous utilisons le «ng-soumettre» pour appeler une fonction appelée « soumettre ». Cette fonction sera utilisée pour modifier l'attribut ladda du bouton de soumission.
  2. 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.
  3. La propriété data-style est encore une fois un attribut supplémentaire offert par le framework ladda, qui ajoute simplement un effet visuel différent au bouton de soumission.
  4. Le module 'AngularJS-ladda' doit être ajouté à l'application AngularJS.JS pour que le framework ladda fonctionne.
  5. Dans un premier temps, 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 de soumission. En définissant initialement cela sur false, nous disons que nous ne voulons pas que le bouton de soumission ait l'effet ladda pour l'instant.
  6. Nous déclarons une fonction qui est appelée lorsque le bouton de soumission est enfoncé. Dans cette fonction, nous définissons la « soumission » sur true. Cela entraînera l'application de l'effet ladda au bouton de soumission.

Si le code est exécuté avec succès, la suitewing La sortie sera affichée lorsque vous exécutez votre code dans le navigateur.

Sortie

Commentaires des utilisateurs avec les boutons Ladda

Lorsque le formulaire est initialement affiché, le bouton Soumettre est affiché sous sa forme simple.

Commentaires des utilisateurs avec les boutons Ladda

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 de soumission, ce qui provoque l'effet de rotation du bouton.

Résumé

  • Validation du textebox Les contrôles HTML peuvent être effectués en utilisant l'attribut « obligatoire ».
  • En HTML5, de nouveaux contrôles ont été ajoutés tels que le mot de passe, emailet un numéro qui fournissent leur propre ensemble de validations.
  • La validation du 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 JCS-auto validate.
  • Des boutons Ladda peuvent être ajoutés à une application Angular.js pour donner une sensation visuelle légèrement améliorée à l'utilisateur lorsque le bouton est enfoncé.