AngularJS-Formularvalidierung beim Senden: Registrierungsbeispiel
James Hartmann
Formularvalidierung in AngularJS
Formularvalidierung in AngularJS ist der Prozess, der sicherstellt, dass die in ein Formular eingegebenen Daten korrekt und vollständig sind. Wenn ein Benutzer das Formular absendet, erfolgt zunächst eine Validierung, bevor die Daten an den Server gesendet werden. Der Validierungsprozess stellt im bestmöglichen Maße sicher, dass die Daten für die Eingabefelder richtig eingegeben werden.
Nehmen wir als reales Beispiel eine Site an, die ein Registrierungsformular erfordert, bevor man vollen Zugriff auf diese Site erhält. Die Registrierungsseite würde Eingabefelder für Benutzername, Passwort, E-Mail-ID usw. enthalten.
Beispielsweise muss die E-Mail-ID immer das Format Benutzername@site.domain; wenn jemand nur den Benutzernamen in die E-Mail-ID eingibt, sollte die Validierung im Idealfall fehlschlagen. Bei der Validierung werden also diese grundlegenden Prüfungen durchgeführt, bevor die Details zur weiteren Verarbeitung an den Server gesendet werden.
Formularvalidierung mit HTML5
Bei der Formularvalidierung handelt es sich um den Prozess der Vorabvalidierung der vom Benutzer in ein Webformular eingegebenen Informationen, bevor diese an den Server gesendet werden. Es ist immer besser, die Informationen auf der Clientseite selbst zu validieren. Dies liegt daran, dass der Aufwand geringer ist, wenn dem Benutzer das Formular erneut angezeigt werden muss, wenn die eingegebenen Informationen falsch waren.
Schauen wir uns an, wie die AngularJS-Formularvalidierung in HTML5 durchgeführt werden kann.
In unserem Beispiel zeigen wir dem Benutzer ein einfaches Registrierungsformular, in das er Angaben wie Benutzernamen, Passwort, E-Mail-ID und Alter eingeben muss.
Das Formular verfügt über Validierungskontrollen, um sicherzustellen, dass der Benutzer die Informationen ordnungsgemäß eingibt.
<!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>
Code Erklärung
- Für den Texteingabetyp verwenden wir das Attribut „erforderlich“. Dies bedeutet, dass das Textfeld beim Absenden des Formulars nicht leer sein darf und dass im Textfeld eine Art Text vorhanden sein muss.
- Der nächste Eingabetyp ist Passwort. Da der Eingabetyp als Passwort markiert ist, wird der Text, den der Benutzer in das Feld eingibt, maskiert.
- Da der Eingabetyp als E-Mail angegeben ist, muss der Text im Feld dem Muster entsprechen name@site.domain.
- Wenn der Eingabetyp als Zahl markiert ist und ein Benutzer versucht, über die Tastatur oder den Buchstaben ein beliebiges Zeichen einzugeben, wird dieses nicht in das Textfeld eingegeben.
Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser zur AngularJS-Formularvalidierung beim Senden ausführen.
Ausgang
Um die Formularvalidierung in Aktion zu sehen, klicken Sie auf die Schaltfläche „Senden“, ohne irgendwelche Informationen auf dem Bildschirm einzugeben.
Nach dem Klicken auf die Schaltfläche „Senden“ wird ein Popup mit einem Validierungsfehler angezeigt, der darauf hinweist, dass das Feld ausgefüllt werden muss.
Daher führt die Validierung für das als erforderlich markierte Steuerelement dazu, dass die Fehlermeldung angezeigt wird, wenn der Benutzer keinen Wert in das Textfeld eingibt.
Wenn der Benutzer einen beliebigen Wert in die Passwortsteuerung eingibt, werden Sie das Symbol „*“ bemerken, das zum Maskieren der eingegebenen Zeichen verwendet wird.
Geben wir dann eine falsche E-Mail-ID ein und klicken auf die Schaltfläche „Senden“. Nach dem Klicken auf die Schaltfläche „Senden“ wird ein Popup mit einem Validierungsfehler angezeigt, der besagt, dass das Feld das Symbol „@“ enthalten muss.
Die Validierung für das Steuerelement, das als E-Mail-Steuerelement markiert wurde, führt dazu, dass die Fehlermeldung angezeigt wird, wenn der Benutzer keine gültige E-Mail-ID in das Textfeld eingibt.
Wenn Sie schließlich versuchen, Zeichen in das Alterstextsteuerelement einzugeben, werden diese nicht auf dem Bildschirm eingegeben. Das Steuerelement wird nur dann mit einem Wert gefüllt, wenn eine Zahl in das Steuerelement eingegeben wird.
Formularvalidierung mit $dirty, $valid, $invalid, $pristine
AngularJS stellt seine zusätzlichen Eigenschaften zur Validierung bereit. AngularJS stellt die folgenden Eigenschaften für Steuerelemente zur Validierung bereit
- $schmutzig – Der Benutzer hat mit dem Steuerelement interagiert
- $gültig – Der Feldinhalt ist gültig
- $ungültig – Der Feldinhalt ist ungültig
- $makellos – Der Benutzer hat noch nicht mit dem Steuerelement interagiert
Nachfolgend sind die Schritte aufgeführt, die zur Durchführung der Angular-Validierung befolgt werden müssen.
Schritt 1) Verwenden Sie beim Deklarieren des Formulars die Eigenschaft no valide. Diese Eigenschaft teilt HTML5 mit, dass die Validierung von AngularJS durchgeführt wird.
Schritt 2) Stellen Sie sicher, dass für das Formular ein Name definiert ist. Der Grund dafür ist, dass bei der Durchführung der Angular-Validierung der Formularname verwendet wird.
Schritt 3) Stellen Sie sicher, dass für jedes Steuerelement auch ein Name definiert ist. Der Grund dafür ist, dass bei der Durchführung der Angular-Validierung der Kontrollname verwendet wird.
Schritt 4) Verwenden Sie das ng-zeigen Anweisung, um die Eigenschaften $dirty, $invalid und $valid für die Steuerelemente zu überprüfen.
Schauen wir uns ein Beispiel an, das die oben genannten Schritte beinhaltet.
In unserem Beispiel,
Wir werden nur ein einfaches Textfeld haben, in das der Benutzer einen Themennamen eingeben muss. Wenn dies nicht geschieht, wird ein Validierungsfehler ausgelöst und dem Benutzer die Fehlermeldung angezeigt.
<!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>
Code Erklärung
- Beachten Sie, dass wir dem Formular einen Namen gegeben haben, der „myForm“ lautet. Dies ist beim Zugriff auf die Steuerelemente im Formular für die AngularJS-Validierung erforderlich.
- Verwenden Sie die Eigenschaft „novalidate“, um sicherzustellen, dass das HTML-Formular AngularJS die Durchführung der Validierung ermöglicht.
- Wir verwenden die Anweisung ng-show, um die Eigenschaften „$dirty“ und „$invalid“ zu prüfen. Das bedeutet, dass der Eigenschaftswert „$dirty“ wahr ist, wenn das Textfeld geändert wurde. Auch wenn der Wert des Textfelds null ist, wird die Eigenschaft „$invalid“ wahr. Wenn also beide Eigenschaften wahr sind, schlägt die Validierung für das Steuerelement fehl. Wenn also beide Werte wahr sind, wird auch ng-show wahr und das Span-Steuerelement mit den roten Zeichen wird angezeigt.
- Dabei überprüfen wir die Eigenschaft „$error“, die ebenfalls als „true“ ausgewertet wird, da wir für das Steuerelement angegeben haben, dass ein Wert für das Steuerelement eingegeben werden soll. In einem solchen Fall, in dem keine Daten in das Textfeld eingegeben wurden, zeigt das Span-Steuerelement den Text „Benutzername ist erforderlich“ an.
- Wenn der Wert des Textfeld-Steuerelements ungültig ist, möchten wir auch die Schaltfläche „Senden“ deaktivieren, damit der Benutzer das Formular nicht senden kann. Wir verwenden die Eigenschaft „ng-disabled“ für das Steuerelement, um dies basierend auf dem bedingten Wert der Eigenschaften „$dirty“ und „$invalid“ des Steuerelements zu tun.
- Im Controller setzen wir einfach den Anfangswert des Textfeldwerts auf den Text „AngularJS“. Dies wird nur durchgeführt, um einen Standardwert für das Textfeld festzulegen, wenn das Formular zum ersten Mal angezeigt wird. Es zeigt besser, wie die Validierung für das Textfeld erfolgt.
Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgang
Wenn das Formular zum ersten Mal angezeigt wird, zeigt das Textfeld den Wert „AngularJS“ an und die „Senden-Schaltfläche“ ist aktiviert. Sobald Sie den Text aus dem Steuerelement entfernen, wird die Validierungsfehlermeldung aktiviert und die „Senden-Schaltfläche“ deaktiviert.
Der obige Screenshot zeigt zwei Dinge
- Die Schaltfläche „Senden“ ist deaktiviert
- Im Textfeld „Thema“ ist kein Themenname vorhanden. Daher wird die Fehlermeldung „Benutzername ist erforderlich“ angezeigt.
Formularvalidierung mit AngularJS Auto Validate
In AngularJS gibt es die Möglichkeit, alle Steuerelemente in einem Formular automatisch zu validieren, ohne dass benutzerdefinierter Code für die Validierung geschrieben werden muss. Dies kann durch die Einbindung eines benutzerdefinierten Moduls namens „jcs-AutoValidate“ erfolgen.
Wenn dieses Modul vorhanden ist, müssen Sie keinen speziellen Code einfügen, um die Validierung durchzuführen oder die Fehlermeldungen anzuzeigen. Dies alles wird vom Code im JCS-AutoValidate erledigt.
Schauen wir uns ein einfaches Beispiel an, wie dies erreicht werden kann.
In diesem Beispiel
Wir werden nur ein einfaches Formular mit einem Textfeld-Steuerelement haben, das ein Pflichtfeld ist. Wenn dieses Steuerelement nicht ausgefüllt ist, sollte eine Fehlermeldung angezeigt werden.
<!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>
Code Erklärung
- Zuerst müssen wir das Skript „jcs-auto-validate.js“ einbinden, das über alle Funktionen zur automatischen Validierung verfügt.
- Wir müssen sicherstellen, dass jedes Element einschließlich des „div-Tags“ in einer „form-group“-Klasse platziert wird.
- Außerdem muss sichergestellt werden, dass jedes Element (bei dem es sich um ein HTML-Element wie Eingabesteuerelement, Spansteuerelement, Div-Steuerelement usw. handelt) wie die Eingabesteuerelemente auch in der Formulargruppenklasse platziert wird.
- Fügen Sie jcs-autovalidate in Ihr AngularJS-JS-Modul ein.
Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgang
Wenn Sie Ihren Code ausführen, wird standardmäßig das obige Formular entsprechend dem HTML-Code angezeigt.
Wenn Sie versuchen, das Formular abzusenden, wird die Fehlermeldung „Dieses Feld ist erforderlich“ angezeigt. All dies wird durch die JCS-AutoValidate-Option erledigt.
Benutzer-Feedbacks mit Ladda-Buttons
Bei den „Ladda“-Knöpfen handelt es sich um ein spezielles Gerüst für darüber liegende Knöpfe JavaSkript um Tasten einen visuellen Effekt zu verleihen, wenn sie gedrückt werden.
Wenn also ein Button mit dem Attribut „ladda“ versehen wird und gedrückt wird, wird ein Spin-Effekt angezeigt. Außerdem stehen für die Schaltfläche verschiedene Datenstile zur Verfügung, um zusätzliche visuelle Effekte bereitzustellen.
Schauen wir uns ein Beispiel an, wie man die „Ladda“-Tasten in Aktion sieht. Wir werden nur ein einfaches Formular sehen, das über eine Schaltfläche zum Senden verfügt. Wenn die Taste gedrückt wird, wird ein Dreheffekt auf der Taste angezeigt.
<!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>
Code Erklärung
- Wir verwenden das „ng-submit”-Direktive, um eine Funktion namens „submit“ aufzurufen. Diese Funktion wird verwendet, um das Ladda-Attribut der Senden-Schaltfläche zu ändern.
- Das Ladda-Attribut ist ein spezielles Attribut des Ladda-Frameworks. Es ist dieses Attribut, das der Kontrolle den Spin-Effekt hinzufügt. Wir setzen den Wert des Ladda-Attributs auf die Variable Submitting.
- Die data-style-Eigenschaft ist wiederum ein zusätzliches Attribut des Ladda-Frameworks, das lediglich einen anderen visuellen Effekt zur Senden-Schaltfläche hinzufügt.
- Das Modul „AngularJS-ladda“ muss zur AngularJS.JS-Anwendung hinzugefügt werden, damit das Ladda-Framework funktioniert.
- Zunächst definieren wir den Wert einer Variablen namens „submitting“ und setzen ihn auf „false“. Dieser Wert wird für das ladda-Attribut der Submit-Schaltfläche festgelegt. Indem wir dies zunächst auf „false“ setzen, sagen wir, dass wir noch nicht möchten, dass die Schaltfläche „Senden“ den Ladda-Effekt hat.
- Wir deklarieren eine Funktion, die aufgerufen wird, wenn die Schaltfläche „Senden“ gedrückt wird. In dieser Funktion setzen wir „submitting“ auf „true“. Dadurch wird der Ladda-Effekt auf die Schaltfläche „Senden“ angewendet.
Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgang
Beim ersten Anzeigen des Formulars wird die Schaltfläche „Senden“ in ihrer einfachen Form angezeigt.
Wenn die Schaltfläche „Senden“ gedrückt wird, wird die Sendevariable im Controller auf „true“ gesetzt. Dieser Wert wird an das „ladda“-Attribut der Senden-Schaltfläche übergeben, was den Spin-Effekt der Schaltfläche verursacht.
Zusammenfassung
- Die Validierung der Textfeld-HTML-Steuerelemente kann mithilfe des Attributs „erforderlich“ erfolgen.
- In HTML5 wurden neue Steuerelemente wie Kennwort, E-Mail und Nummer hinzugefügt, die über eigene Validierungssätze verfügen.
- Die Formularvalidierung in AngularJS erfolgt durch Betrachtung der Werte $dirty, $valid, $invalid und $pristine eines Formularsteuerelements.
- Eine automatische Validierung in AngularJS-Anwendungen kann auch mithilfe des JCS-Auto-Validate-Moduls erreicht werden.
- Ladda-Schaltflächen können zu einer Angular.js-Anwendung hinzugefügt werden, um dem Benutzer beim Drücken der Schaltfläche ein etwas verbessertes visuelles Gefühl zu vermitteln.