Wie Feedback zu Web-Formular Benutzer bereitstellen

Das allgemeine Muster für das Feedback auf einem Web-Formular wird das Feld zu markieren, die Aufmerksamkeit braucht und aktivieren Messaging für die einzelnen Feld und der Gesamtform.

Zur Erleichterung Feedback zu geben, zwei neue Funktionen in form.js.

1. Öffnen form.js in Ihrem Editor, ist, wenn es nicht bereits geöffnet ist.

2. Innerhalb form.js, Fügen Sie die folgenden Funktionen, nachdem die validateForm 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") -.} function removeFeedback () {$ ( "# errorDiv") html ( "") -.. $ ( 'Eingang'), die jeweils (function () {$ (this) .removeClass ( "Errorclass") -}) - $ ( ".. errorSpan ') jeweils (function () {$ (this) .addClass (" errorFeedback ") -}) -}

3. Mit diesen Funktionen in der Datei benötigen Sie neben sie zu nennen.

   Der Aufruf der removeFeedback Funktion wird sofort hinzugefügt innerhalb der einreichen Handler, so dass die Fehlerrückmeldung gelöscht wird, wenn das Formular abgeschickt wird. Dieser Aufruf sieht wie folgt aus:

   removeFeedback () -

   Das Rückmeldung geben Funktion muss innerhalb des else-Bedingung in der einreichen Handler Form und sieht wie folgt hinzugefügt werden:

   provideFeedback (Fehler) -

   Das einreichen Handler sollte nun wie folgt aussehen:

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

4. Speichern Sie die Datei (als form.js) In Ihrem Dokument Wurzel.

   An diesem Punkt sollte die gesamte Datei aus dieser bestehen:

   $ (Document) .ready (function () {$ ( "# Benutzerformular") einreichen (function (e) {removeFeedback () - var. Errors = validateForm () - if (Fehler == "") {return Echt-} else {provideFeedback (Fehler) -e.preventDefault () - return false -}}) - Funktion validateForm () {var errorFields = new Array () - // prüfen erforderlichen Felder etwas in themif ($ ( '# Name' haben) .val () == "") {errorFields.push ( 'name') -} if ($ ( '# E-Mail') val () == ".") {errorFields.push ( 'E-Mail') -} if ($ ( '# password1') val () == "".) {errorFields.push ( 'password1') -} return errorFields-} // end function validateFormfunction provideFeedback (incomingErrors) {for (var i = 0- i lt; incomingErrors.length- i ++) {$ ( "#" + incomingErrors [i]) addClass ( "Errorclass".) - $ ( "#" + incomingErrors [i] + "Error") removeClass ( "errorFeedback") -.} $ ( "# errorDiv") html ( "Fehler aufgetreten") -.} function removeFeedback () {$ ( "# errorDiv") html ( "") -.. $ ( 'Eingang'), die jeweils (function () {$ (this) .removeClass ( "Errorclass") -}) - $ ( ".. errorSpan ') jeweils (function () {$ (this) .addClass (" errorFeedback ") -}) -}}) -

5. Neu laden form.php in Ihrem Browser.

6. Deaktivieren Sie alle Informationen aus den Bereichen, wenn überhaupt von Ihrem Browser gespeichert wurde.

7. Innerhalb leere Felder im Formular, klicken Sie auf Abfrage Senden.

   

8. Füllen Sie das Feld Name ein und klicken Sie auf Absenden Abfrage.

   Das Feedback anzeigt, gab es sollte ein Fehler in dem Feld Name zu löschen, aber die anderen bleiben.

   

9. Füllen Sie alle Daten innerhalb der E-Mail-Adresse und Passwort Felder und klicken Sie auf Absenden Abfrage.

   Das Formular sollte, senden Sie sie erneut eine Seite geben nicht gefunden oder ähnliche Fehler.