Validation de formulaire AngularJS lors de la soumission : $dirty, $valid et $invalid

Par : James Hartmann James Hartmann
Hours Le kit de préparation mis à jour

⚡ Résumé intelligent

La validation de formulaires dans AngularJS vérifie que les données saisies dans un formulaire sont correctes et complètes avant leur envoi au serveur. Quatre approches sont présentées ici, allant des attributs HTML5 simples aux modules de validation automatique, en passant par les propriétés de portée.

  • 🧩 Attributs HTML5 : L'attribut « required » et les types de saisie email, password et number permettent d'effectuer des vérifications natives du navigateur sans script.
  • 🔍 Propriétés de l'État : AngularJS expose les variables $dirty, $pristine, $valid et $invalid sur chaque contrôle nommé à l'intérieur d'un formulaire nommé.
  • 🏷️ Exigence de dénomination : Le formulaire et chaque contrôle nécessitent tous deux un attribut name, car l'état de validation est adressé sous la forme nomDuFormulaire.nomDuContrôle.
  • 🚫 Supprimer les fenêtres contextuelles natives : L'ajout de l'attribut novalidate au formulaire empêche le navigateur d'intercepter la soumission afin qu'AngularJS puisse la gérer.
  • 💬 Affichage des messages : Le module ngMessages remplace les directives ng-show empilées et affiche une erreur à la fois, par ordre de priorité.
  • ⚙️ Validation automatique : Le module jcs-autoValidate génère des messages d'erreur pour chaque contrôle sans aucun balisage personnalisé.
  • (I.e. Commentaires sur la soumission : Un bouton Ladda affiche un indicateur de chargement pendant le traitement d'une requête, signalant ainsi la progression à l'utilisateur.
En savoir plus

Validation de formulaire dans AngularJS

Validation du formulaire Dans AngularJS, la validation consiste à vérifier l'exactitude et l'exhaustivité des données saisies dans un formulaire. Lorsqu'un utilisateur soumet le formulaire, une validation est effectuée avant l'envoi des données au serveur. Ce processus de validation garantit, dans la mesure du possible, que les champs de saisie ont été correctement remplis.

Prenons l'exemple concret d'un site exigeant de remplir un formulaire d'inscription avant d'accorder un accès complet. La page d'inscription comporterait des champs pour le nom d'utilisateur, le mot de passe, l'adresse électronique, etc.

Par exemple, l'adresse e-mail doit toujours être au format suivant : nom d'utilisateur@site.domaineSi un utilisateur ne saisit que son nom d'utilisateur, la validation doit échouer. La validation effectue ces vérifications de base avant l'envoi des données au serveur pour traitement.

⚠️ Note de version : AngularJS (branche 1.x) a atteint sa fin de vie le 31 décembre 2021 et ne bénéficie plus de correctifs de sécurité. Les techniques décrites ci-dessous restent valables pour les applications existantes ; Angular moderne gère la même tâche avec des formulaires réactifs ou pilotés par modèle.

Validation du formulaire à l'aide de HTML5

La validation de formulaire consiste à prévalider les informations saisies dans un formulaire web avant leur envoi au serveur. La validation côté client est préférable, car elle engendre une surcharge bien moindre que la réaffichage du formulaire après chaque aller-retour.

L'exemple ci-dessous présente un formulaire d'inscription simple dans lequel l'utilisateur saisit un nom d'utilisateur, un mot de passe, une adresse électronique et son âge. Le formulaire comporte des contrôles de validation qui garantissent l'exactitude des informations saisies.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<h1>Guru99 Global Event</h1>

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

    Enter your password:
    <input type="password" name="password"><br><br>

    Enter your email:
    <input type="email" name="email"><br><br>

    Enter your age:
    <input type="number" name="age"><br><br>

    <input type="submit" value="Submit">
</form>
</body>
</html>

⚠️ Des corrections ont été apportées à chaque annonce sur cette page. Les originaux ont déclaré chrset="UTF 8", ce qui n'est ni un attribut valide ni un encodage valide, et a chargé AngularJS trois fois — angular-route.js premièrement, ce qui provoque une erreur car le module de routage s'enregistre auprès d'un framework qui n'a pas été chargé, puis angular.min.js et angular.js, la même bibliothèque deux fois. Ils ont également retiré bootstrap.css à travers un <script> L'étiquette `<style>` empêchait l'application d'un style. Chaque fiche charge désormais une bibliothèque (version 1.8.3) et lie correctement la feuille de style. Le remplissage de la mise en page est constitué de plusieurs éléments. &nbsp; Les entités ont été supprimées.

Code Explication

  1. Pour le type de saisie de texte, le required Cet attribut signifie que la zone de texte ne peut pas être vide lors de la soumission du formulaire.
  2. Le type de saisie suivant est le mot de passe. Comme il s'agit d'un mot de passe, le texte saisi dans ce champ est masqué.
  3. Étant donné que le type de saisie est spécifié comme adresse e-mail, le texte dans la zone doit correspondre au modèle. nom@site.domaine.
  4. Lorsque le type d'entrée est indiqué comme numérique, les caractères saisis au clavier ne sont tout simplement pas acceptés par le champ.

Sortie

Pour voir la validation en action, cliquez sur Soumettre sans rien saisir.

Une fenêtre contextuelle s'affiche indiquant que le champ doit être rempli ; par conséquent, le champ marqué comme obligatoire bloque la soumission lorsqu'il est laissé vide.

La saisie d'une valeur dans le champ du mot de passe affiche le symbole '*' masquant les caractères.

Saisir une adresse e-mail incorrecte et cliquer sur « Envoyer » fait apparaître une fenêtre contextuelle demandant le symbole @. Enfin, les caractères saisis dans le champ « âge » n'apparaissent jamais, car ce champ n'accepte que des chiffres.

Les fenêtres contextuelles du navigateur sont rapides à configurer, mais leur texte et leur style ne peuvent pas être modifiés. C'est là que les propriétés de validation d'AngularJS entrent en jeu.

Ne manquez pas:

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

AngularJS fournit ses propres propriétés pour la validation. Les propriétés suivantes sont exposées sur chaque contrôle nommé :

  • $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 une validation AngularJS.

Étape 1) Utilisez le bouton novalidate Cette propriété est utilisée lors de la déclaration du formulaire. Elle indique au navigateur que la validation sera gérée par AngularJS.

Étape 2) Assurez-vous que le formulaire possède un nom, car ce nom est utilisé pour atteindre l'état de validation.

Étape 3) Assurez-vous que chaque commande possède également un name Pour la même raison, un contrôle sans nom n'est jamais enregistré sur le formulaire.

Étape 4) Utilisez le bouton ng-show directive permettant de vérifier les propriétés $dirty, $invalid et $valid.

L'exemple ci-dessous comporte un unique champ de texte dans lequel l'utilisateur saisit le nom d'un sujet. Si ce champ est laissé vide, une erreur de validation est déclenchée et un message s'affiche.

<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.$invalid">
    </p>
</form>

<script>
    var app = angular.module("DemoApp", []);

    app.controller("DemoController", function($scope) {
        // Seed the textbox so the form starts in a valid state
        $scope.user = "AngularJS";
    });
</script>

⚠️ Deux erreurs logiques corrigées. La version originale désactivait le bouton avec ng-disabled="myForm.user.$dirty && myForm.user.$invalid". Car $dirty La condition est fausse jusqu'à ce que l'utilisateur touche le champ ; le bouton reste désactivé. activé sur un formulaire vierge intact, le cas précis qu'il était censé bloquer ; myForm.$invalid couvre les deux. L'original encapsulait également la valeur par défaut dans $scope.Display = function () { $scope.user = 'Angular'; }Une fonction n'ayant jamais été appelée, la zone de texte s'est ouverte vide malgré le texte indiquant « AngularJS ». L'affectation se fait désormais directement, la valeur étant entre guillemets.

Code Explication

  1. Le formulaire est nommé « myForm ». Ce nom est nécessaire pour accéder à ses champs de validation.
  2. Le novalidate Cette propriété empêche le navigateur de valider le processus, permettant ainsi à AngularJS de s'en charger.
  3. La directive ng-show vérifie les propriétés « $dirty » et « $invalid ». Si le champ de texte a été modifié, $dirty vaut vrai ; s’il est vide, $invalid vaut vrai. Lorsque les deux propriétés sont vraies, le texte en rouge est affiché.
  4. La vérification imbriquée lit la propriété « $error.required », qui est vraie chaque fois qu'un contrôle obligatoire n'a pas de valeur, et affiche « Le nom d'utilisateur est obligatoire ».
  5. Le bouton de soumission est désactivé via ng-disabled lorsque le formulaire dans son ensemble est invalide.
  6. Le contrôleur définit la valeur initiale du champ de texte sur « AngularJS », de sorte que le formulaire s'ouvre dans un état valide et que la validation est plus facile à observer lorsque le texte est supprimé.

Sortie

Lors du premier affichage du formulaire, la zone de texte affiche « AngularJS » et le bouton « Envoyer » est activé. Dès que le texte est supprimé, un message d’erreur apparaît et le bouton se désactive.

La capture d'écran ci-dessus montre deux choses :

  • Le bouton « Envoyer » est désactivé.
  • Aucun nom de sujet n'est renseigné dans le champ « Sujet », le message d'erreur « Nom d'utilisateur requis » s'affiche.

Comment afficher les erreurs de validation avec ngMessages

Le modèle ci-dessus fonctionne, mais il n'est pas évolutif. Un champ avec quatre contraintes nécessite quatre éléments imbriqués. ng-show des plages, et lorsque plusieurs d'entre elles tombent en panne simultanément, tous les messages apparaissent ensemble. ngMessages Ce module, fourni séparément par l'équipe AngularJS, résout les deux problèmes : il affiche un message à la fois, dans l'ordre où les messages sont écrits.

Chargez le module et ajoutez-le comme dépendance.

<script src="https://code.angularjs.org/1.8.3/angular-messages.js"></script>
<script>
    angular.module("DemoApp", ["ngMessages"]);
</script>

Le balisage se lit alors comme une liste de règles plutôt que comme une pile de conditions.

<input type="text" name="user" ng-model="user"
       required ng-minlength="4" ng-maxlength="20">

<div style="color:red" ng-messages="myForm.user.$error"
     ng-if="myForm.user.$dirty">
    <div ng-message="required">A topic name is required</div>
    <div ng-message="minlength">Use at least 4 characters</div>
    <div ng-message="maxlength">Use no more than 20 characters</div>
</div>

Trois détails expliquent son bon fonctionnement en pratique. ng-messages points d'attribut au niveau du contrôle $error L'objet est utilisé plutôt qu'une valeur booléenne, ce qui évite de répéter une condition. Seule la première correspondance est prise en compte. ng-message Cela signifie qu'un champ vide est signalé comme obligatoire au lieu de signaler également sa longueur. ng-messages-multiple ce comportement s'inverse lorsque chaque défaillance doit réellement être répertoriée.

enveloppeping le bloc dans ng-if="myForm.user.$dirty" maintient le formulaire silencieux jusqu'à ce que l'utilisateur ait saisi quelque chose. $touched pour $dirty retarde encore le message, jusqu'à ce que l'attention se détourne du sujet, ce qui est généralement le choix le plus convivial sur un long formulaire d'inscription.

Une mise en garde: ngMessages Le script est distribué sous forme de fichier séparé ; oublier la balise script ou la dépendance au module ne fait donc rien afficher dans le bloc, sans aucune erreur dans la console pour l’expliquer.

La rédaction manuelle des messages est précise mais répétitive. La section suivante présente un module qui les génère automatiquement.

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

AngularJS peut valider automatiquement tous les champs d'un formulaire, sans nécessiter de code personnalisé pour la validation ou les messages d'erreur. Ceci est possible grâce à l'intégration d'un module communautaire appelé « jcs-autoValidate ».

Grâce à ce module, aucun code spécifique n'est nécessaire pour exécuter la validation ou afficher les messages ; tout est géré par jcs-autoValidate.

L'exemple ci-dessous présente un formulaire simple avec un seul champ de texte obligatoire. Un message d'erreur s'affiche si ce champ est vide.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/jcs-auto-validate.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

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

<script>
    var app = angular.module('DemoApp', ['jcs-autoValidate']);
</script>
</body>
</html>

⚠️ Correction : L'original identifiait le contrôle avec id="user" uniquement. jcs-autoValidate accède au contrôle via le formulaire, donc un name L'attribut est obligatoire et le message n'apparaissait jamais sans lui. La version originale chargeait également deux versions différentes d'AngularJS, dont la 1.6.4. Google CDN en parallèle de la version 1.6.9, et jamais lié Bootstrap même si l'exemple dépend de son form-group et form-control classes pour positionner le texte d'erreur.

Remarque : jcs-autoValidate est un projet communautaire qui n'est plus activement maintenu. Il reste utilisable sur les applications AngularJS existantes, mais la fonction intégrée ngMessages L'approche présentée précédemment est le choix le plus sûr pour toute nouveauté.

Code Explication

  1. Le script « jcs-auto-validate.js », qui contient toutes les fonctionnalités d'auto-validation, est inclus.
  2. Chaque contrôle et son élément div environnant sont placés à l'intérieur d'une classe « form-group », dans laquelle le module injecte son message.
  3. Le contrôle comporte à la fois un identifiant et un name et Bootstrap fournit le form-control style.
  4. Le module « jcs-autoValidate » est répertorié comme dépendance du module AngularJS.

Sortie

Par défaut, le formulaire est rendu exactement comme il est écrit.

L'envoi d'un formulaire vide affiche le message « Ce champ est obligatoire », généré automatiquement par jcs-autoValidate. Une fois le formulaire validé, la question qui se pose est celle de ce que l'utilisateur voit lors de son envoi.

Commentaires des utilisateurs avec les boutons Ladda

Les boutons « Ladda » sont une structure construite sur la base de Javascénario qui donne aux boutons un effet visuel lorsqu'on appuie dessus.

Si un bouton possède l'attribut « ladda » et qu'on appuie dessus, un effet de rotation s'affiche. Différents styles de données sont disponibles pour des effets visuels supplémentaires.

L'exemple ci-dessous présente un formulaire simple avec un bouton « Envoyer ». Lorsqu'on appuie sur ce bouton, un effet de rotation apparaît.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/angular-ladda.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <form name="myForm" novalidate ng-submit="submit()">
        <button class="btn btn-primary" type="submit"
                ladda="submitting" name="sbutton"
                data-style="expand-right">Submit</button>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['angular-ladda']);

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

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

⚠️ Correction : la charge d'origine angular-ladda.js et angular-ladda.min.js ensemble, ce qui enregistre le même module deux fois, et a de nouveau importé deux versions d'AngularJS. Il a également listé jcs-autoValidate Il s'agit d'une dépendance que cet exemple n'utilise jamais. Une copie de chaque bibliothèque est chargée ici.

Code Explication

  1. L'événement ng-soumettreLa directive appelle une fonction nommée « submit », qui modifie l'attribut ladda du bouton.
  2. L'attribut ladda appartient au framework Ladda et c'est lui qui ajoute l'effet de rotation. Sa valeur est liée à submitting variable.
  3. La propriété data-style est un autre attribut Ladda qui permet de sélectionner un effet visuel différent.
  4. Le module « angular-ladda » doit être ajouté à l'application AngularJS pour que le framework fonctionne.
  5. Le submitting La variable est initialisée à faux, le bouton démarre donc sans l'effet de rotation.
  6. La fonction de soumission définit submitting La valeur est définie sur « vrai », ce qui applique l'effet. Dans une application réelle, elle serait réinitialisée à « faux » une fois que le serveur aura répondu ; sinon, le bouton tournerait indéfiniment.

Sortie

Lors du premier affichage du formulaire, le bouton « Soumettre » apparaît sous sa forme simple.

Lorsque le bouton est enfoncé, le submitting La variable est définie sur vrai. Cette valeur atteint l'attribut « ladda » du bouton, produisant l'effet de rotation.

FAQ

La variable `$dirty` passe à `true` lorsque la valeur change. La variable `$touched` passe à `true` lorsque le champ perd le focus. Utilisez `$touched` pour retarder l'affichage d'une erreur jusqu'à ce que l'utilisateur ait continué, ce qui est moins intrusif.ping.

Ajoutez la directive ng-pattern avec une expression régulière, par exemple ng-pattern="/^[0-9]{6}$/". L'erreur apparaît alors sous la forme $error.pattern, que ngMessages peut signaler comme n'importe quelle contrainte intégrée.

Oui. Les outils d'IA analysent le balisage et génèrent les blocs required, ng-pattern et ngMessages correspondants. Vérifiez toujours les expressions régulières, car les modèles d'adresse e-mail et de numéro de téléphone générés rejettent souvent des entrées valides.

Les assistants IA vérifient rapidement les trois causes habituelles : un attribut name manquant sur le formulaire ou le contrôle, un ng-model manquant et l’absence de novalidate, ce qui fait que le navigateur intercepte d’abord la soumission.

Non. Cela améliore l'expérience et réduit les allers-retours, mais n'importe qui peut contourner cette limitation avec les outils de développement. Toute règle appliquée dans le navigateur doit également l'être sur le serveur.

Résumez cet article avec :