Validation du formulaire AngularJS lors de la soumission : exemple d'inscription
James Hartmann
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 que les détails ne soient envoyés au serveur. Le processus de validation garantit dans la mesure du possible que les détails des champs de saisie sont saisis correctement.
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 comporterait des champs de saisie pour le nom d'utilisateur, le mot de passe, l'identifiant de messagerie, etc.
Par exemple, l'identifiant de messagerie doit toujours être au format : nom d'utilisateur@site.domaine; si quelqu'un saisit 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.
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 des détails tels qu'un nom d'utilisateur, un mot de passe, un identifiant de messagerie et un âge.
Le formulaire comportera des contrôles de validation pour garantir que l'utilisateur saisit les informations de manière appropriée.
<!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>
Enter your user name:
<input type="text" name="name" required><br><br>
Enter your password:
<input type="password"/><br><br>
Enter your email:
<input type="email"/><br><br>
Enter your age:
<input type="number" /><br><br>
<input type="submit" value="Submit"/>
</form>
</div>
</body>
</html>
Explication du code
- Pour le type de saisie 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 de saisie est marqué comme mot de passe, lorsque l'utilisateur saisit un texte dans le champ, il sera masqué.
- Étant donné que le type de saisie est spécifié comme e-mail, le texte dans la zone doit correspondre au modèle nom@site.domaine.
- 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 la zone de texte.
Si le code est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur pour la validation du formulaire AngularJS lors de la soumission.
Sortie
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 affichant 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.
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.
Entrons ensuite un mauvais identifiant de messagerie et cliquons sur le bouton Soumettre. Après avoir cliqué sur le bouton Soumettre, une fenêtre contextuelle apparaîtra affichant 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 de messagerie entraînera l'affichage du message d'erreur si l'utilisateur ne saisit pas un identifiant de messagerie approprié 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 les propriétés suivantes pour les 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 simplement avoir un simple champ de texte dans lequel l'utilisateur doit saisir 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.
<!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
- 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.
- Utilisation de la propriété « novalidate » pour garantir 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, alors 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. 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é.
- 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 la zone de texte, le contrôle span affichera le texte « Le nom d'utilisateur est requis ».
- Si la valeur du contrôle de la zone de texte 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.
- 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 pour 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 la zone de texte.
Si le code est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.
Sortie
Lorsque le formulaire est initialement affiché, la zone de texte 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é.
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 du sujet. 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 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é.
<!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
- Tout d’abord, nous devons inclure le script « jcs-auto-validate.js » qui possède toutes les fonctionnalités de validation automatique.
- Nous devons nous assurer que chaque élément, y compris la « balise div », est placé dans une classe « form-group ».
- 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.
- Incluez le jcs-autovalidate dans votre module AngularJS JS.
Si le code est exécuté avec succès, la sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.
Sortie
Par défaut, lorsque vous exécutez votre code, le formulaire ci-dessus s'affichera selon le code HTML.
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 Javascénario 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.
<!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
- 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.
- 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é 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.
- Le module 'AngularJS-ladda' doit être ajouté à l'application AngularJS.JS pour que le framework ladda fonctionne.
- 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.
- 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 sortie suivante s'affichera lorsque vous exécutez votre code dans le navigateur.
Sortie
Lorsque le formulaire est initialement affiché, le bouton Soumettre est affiché 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 de soumission, ce 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'e-mail et le 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é.
