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 Erlรคuterung
- 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 die 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 Erlรคuterung
- 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 Erlรคuterung
- 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 Erlรคuterung
- 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.
