Ich habe ein JsFiddle hinzugefügt , damit Sie problemlos Fehler beheben können, anstatt die Umgebung selbst einrichten zu müssen. Wie Sie sehen können, erfolgt die Validierung bereits im E-Mail-Feld vor dem Ereignis blur für das Element input , das durch die Änderung von $scope.Email ausgelöst wurde. Wenn Sie das Element ng-show="!mainForm.validate()" für das Element <p> auskommentieren, werden Sie feststellen, dass das Problem nicht auftritt.
Ich verwende die eckige Implementierung von jQuery Validate und ich benötige die Möglichkeit, ein Formular zu überprüfen ist gültig, ohne dass die Fehlermeldungen angezeigt werden. Die Standardlösung, die ich online gesehen habe, ist die Funktion checkForm() von jQuery Validate, wie folgt:
Der Angular Wrapper, den ich verwende, implementiert jedoch derzeit nicht die Funktion checkForm . Ich habe versucht, den Quellcode zu ändern, um ihn einzubringen, und ich fürchte, ich bin in meinem Kopf. Der Code ist klein und einfach genug, dass ich ihn hier einfügen werde:
Ich möchte es verwenden, um eine Nachricht wie folgt anzuzeigen oder zu verbergen:
%Vor% Der Grund, warum ich nicht nur !mainForm.validate() verwende, ist, dass die Fehlermeldungen auf Elementen angezeigt werden, bevor sie "verschwommen" sind, was ich zu vermeiden versuche. Kann mir jemand helfen, die Funktion checkForm() in diese Winkelanweisung zu implementieren?
Sie können dem Plugin die Funktion checkForm () wie folgt hinzufügen:
%Vor%Hier finden Sie das aktualisierte jsFiddle Ссылка
Referenz: Jquery-Validierung: Aufruf gültig ohne Fehler anzuzeigen?
Wenn ich Ihre Frage richtig verstanden habe, möchten Sie eine Fehlermeldung anzeigen können, wenn die E-Mail-Adresse ungültig ist und Sie die Fehlermeldung anzeigen möchten.
Sie können dies erreichen, indem Sie den Eingabetyp wie dieses <input type=email>
Angular fügt der Form $valid eine Eigenschaft hinzu, so dass Sie Ihren Controller einchecken können, wenn der gesendete Text gültig ist. Wir müssen also nur auf diese Variable im Controller zugreifen und sie invertieren. (Weil wir den Fehler anzeigen möchten, wenn er nicht gültig ist)
Ich habe auch eine Absenden-Schaltfläche hinzugefügt, die die Browser-Validierung beim Senden verwendet. Auf diese Weise wird die Funktion onSubmit nicht einmal aufgerufen und der Browser zeigt einen Fehler an. Diese Methoden erfordern nichts außer angularjs.
Sie können das aktualisierte JSFiddle hier
Stellen Sie sicher, dass Sie Ihre Konsole öffnen, um zu sehen, wann die Funktion onSubmit aufgerufen wird und welcher Wert gesendet wird, wenn Sie die Taste drücken.
Sie können onblur-Ereignis mit ng-show="mainForm.Email.$invalid && mainForm.Email.$touched" bis <p> tag
Standardmäßig mainForm.Email.$touched ist false , bei Unschärfe wird es in true
Für eine korrekte Validierung ändern Sie den Tag-Typ <input> in eine E-Mail
Sie können ng-keydown="mainForm.Email.$touched=false" hinzufügen, wenn Sie beim Bearbeiten des Eingabe-Tags keine Fehlermeldung anzeigen möchten
Ich habe das angular-validate.js Plugin nicht benutzt
%Vor%Aktualisierter Code: JSFiddle
Weitere Informationen zur Winkelvalidierung
Update 2
checkForm gibt zurück, ob das Formular gültig oder ungültig ist
%Vor% zum Ausblenden von Standardnachrichten, die durch das jQuery-Validierungs-Plugin hinzugefügt werden, fügen Sie das folgende Snippet zu $.validator.setDefaults
Hier sieht das modifizierte Plugin wie
aus %Vor%Controller
%Vor%muss auf jedem Eingabe-Tag folgen (Beispiel für E-Mail)
%Vor%Wenn das Formular und die E-Mail ungültig sind, wird die Bestätigungsmeldung angezeigt.
Versuchen Sie diesen Code für die Validierung Dies ist das Formular
%Vor%Sie müssen das Angular Validate Plugin etwas modifizieren. Hier ist eine funktionierende Version Ihres Codes in JSFiddle . Beachten Sie den aktualisierten Plug-in-Code sowie einige Änderungen an Ihrem ursprünglichen Code.
Aktualisierter Plugin-Code fügt dies einfach dem validator.SetDefaults-Parameter hinzu:
%Vor%Dann verwenden wir eine Bereichsvariable, um die benutzerdefinierte Fehlermeldung auszublenden / anzuzeigen:
%Vor%Tags und Links javascript angularjs jquery jquery-validate angular-validation