Wie Sie Ihre Web Formular-Validierung zu verfeinern

Nachdem Sie Ihre erforderlichen Felder und Rückmeldungen an den Benutzer überprüft haben, müssen Sie die Validierung Ihrer Web-Formular zu verfeinern. Vor so tun, sollten Sie innehalten und Blick auf den Code, den Sie für die Validierung hinzugefügt haben.

Das einreichen Event-Handler wird durch jQuery einrichten einreichen() Funktion:

$ ( "# Benutzerformular") einreichen (function (e) {removeFeedback () - var. Errors = validateForm () - if (Fehler == "") {return Echt-} else {provideFeedback (Fehler) -e.preventDefault ( ) -return false -}}) -

Innerhalb der einreichen() Funktion, die erste Sache, die jedes Feedback passiert, wird entfernt. Als nächstes wird die validateForm () Funktion wird aufgerufen, und alles, was wieder von dieser Funktion kommt in die Fehler Variable gesetzt.

Wenn die Fehler-Variable leer ist, dann ist die einreichen() Funktion gibt Boolean wahr, was sagt im Wesentlichen den Browser, "Alles okay- voran gehen und das Formular abschicken." Wenn jedoch Fehler auftreten, die Rückmeldung geben() Funktion wird aufgerufen und die Standardaktionen (das Formular abzusenden) gestoppt werden, dank der prevent und zurück falsch Aussagen.

Das validateForm () Funktion ist das Herz der Validierungslogik für das Formular.

Funktion validateForm () {var errorFields = new Array () - // Check erforderlichen Felder haben etwas themif {errorFields.push ( 'name') ($ ( '# name') val () == "".) -} if (. $ ( '# E-Mail') val () == "") {errorFields.push ( 'E-Mail') -} if (. $ ( '# password1') val () == "") {errorFields. push ( 'password1') -} return errorFields-} // end function validateForm

In dieser Funktion wird ein Array instanziiert die Fehlerfelder zu halten. Dies ermöglicht mehr als ein Fehler zu speichern, anstatt einen einzigen Fehler zu einer Zeit (die für den Benutzer frustrierend sein würde).

Jede erforderliche Feld wird die ID abgerufen werden. Wenn der Wert dieses Feldes ist "", dann wird die ID des Feldes mit dem Fehler wird auf die gedrückt errorFields Array. Schließlich ist die errorFields Array zurückgegeben und wird das Fehler-Array, das Sie in die sehen einreichen() Handler.

Eine andere Möglichkeit, diese Aufgabe zu erfüllen wäre, eine Klasse zu jedem Element hinzugefügt werden, die erforderlich ist, und dann die Schleife durch jede der erforderlichen Klassen mit jQuery, wie $ ( '. Erforderlich'). Each (.

Mit dieser Prüfung können bei der Suche Rückmeldung geben() Funktion:

Funktion provideFeedback (incomingErrors) {for (var i = 0- i lt; incomingErrors.length- i ++) {$ ( "#" + incomingErrors [i]) addClass ( "Errorclass".) - $ ( "#" + incomingErrors [i] "Error") removeClass ( "errorFeedback") -.} $ ( "#errorDiv") html ( "Fehler aufgetreten") -.}

Das Rückmeldung geben() Funktion Schleifen durch die eingehenden Fehler und fügt die Errorclass Klasse auf die Felder. Erinnern Sie sich an die CSS, dass diese Klasse setzt einfach die Hintergrundfarbe zu einem Rotton. Als nächstes wird die errorFeedback Klasse entfernt wird. Diese Klasse verbirgt sich die textliche Feedback, so durch die Klasse zu entfernen, wird die Rückmeldung an den Benutzer sichtbar. Schließlich außerhalb der Schleife, die errorDiv'S HTML ist mit dem Begriff eingestellt "Fehler aufgetreten".

Das letzte Stück des form.js Datei ist die removeFeedback () Funktion:

Funktion removeFeedback () {$ ( "# errorDiv") html ( "") -. $ ( 'Eingang'), die jeweils (function () {$ (this) .removeClass (. "Errorclass") -}) - $ ( ' .errorSpan ') jeweils (function () {$ (this) .addClass ( "errorFeedback") -}.) -}

Diese Funktion setzt die erste errorDiv'S HTML leer. Als nächstes muss jeder Eingang seine Errorclass entfernt und jede errorSpan auf der Seite hat ihre errorFeedback Klasse hinzugefügt, die im wesentlichen versteckt sie aus Sicht. All dies wird mit Hilfe von jQuery Selektoren und Funktionen durchgeführt.

Menü