Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

JavaScript Grundkurs

Formularplausibilisierung

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Hier sehen Sie, wie Sie ein Formular mit JavaScript plausibilisieren. Dabei können Sie dem Anwender Meldungen anzeigen und das Versenden des Formulars verhindern, wenn es nicht korrekt ausgefüllt ist.
09:27

Transkript

In diesem Film zeige ich Ihnen eine der wichtigsten Anwendung von Javascript, das Plaulisiblisieren von Formularen. Betrachten Sie einmal dieses Formular, wenn Sie dieses abschicken wollen und haben es nicht ausgefüllt, dann sehen Sie das hier der Anwender bestimmte Hinweise bekommt, was bei dem Ausfüllen gefehlt hat, was falsch ist und das Formular wird nicht abgeschickt. Klassischerweise wird ein Formular einfach dürch das Auslösende mit submit Button weggeschickt und alle Felder, die mit einem Nameattribut, einen Nameatributt versehen sind, werden zum Server geschickt, so wie das Yahoo jetzt macht und wir auch machen werden, kann man verhindern, dass so ein Formular abgeschickt wird und dem Anwender qualifizierte Meldung geben. Das ist ganz offensichtlich DHTML, was hier diese optische Anzeige macht. Schauen wir uns an was unser Formular leisten wird. Ich habe hier ein Formular, ich möchte die Daten wegschicken, ich klicke hier drauf und Sie sehen, dass die Felder ausgefüllt werden müssen. Sämtliche Felder haben eine rote Hintergrundfarbe und es taucht neben den Feldern eine qualifizierte Fehlermeldung auf. Die User ID hat zu wenig Zeichen, dann trage ich mal einen bestimmte Anzahl von Zeichen rein, das hilft immer noch nicht, aber wenn ich die ausreichende Anzahl an Zeichen eintrage, dann wird dieses Feld akzeptiert, die Meldung verschwindet und die Hintergrundfarbe ist wieder weiß. Das Passwort darf nicht Leer sein und dann ist noch die E-Mail-Adresse Falsch. Ich trage hier was ein, das ist noch keine korrekte E-Mail-Adresse. Ich nehme jetzt mal hier das Passwort wieder raus, ich trage hier allerdings die korrekte E-Mail-Adresse ein, dann wird zwar das akzeptiert, das ist okay, aber das ist immer noch nicht okay und erst wenn ich die Daten korrekt ausgefüllt habe, dann kann ich die Daten wegschicken. Was ebenso überwacht wird ist der Klick auf das Zurücksetzen, den wenn ich hier abbreche wird das Formular nicht zurückgesetzt und erst wenn ich das bestätige, wird das Formular zurückgesetzt. Eventuell Fehlermeldung werden auch dabei beseitigt und auch die Hintergrundfarben von den Eingabefeldern werden wieder auf weiß gesetzt. Nun ist das grundsätzliche für plausibilisieren von Formularen absolut kein triviales Thema und das geht weit über das hinaus, was wir hier programmieren wollen. Die eigentliche Schwierigkeit mit dem Plausibilisieren ist die Logik, was man überhaupt plausibilisiert, wie es plausibilisiert wird und wann es plausibilisiert und in welche Abhängigkeiten dort einzugreifen ist. Hoch complex, aber das soll nicht unser Thema sein, wir gucken uns nur die Technik an. Sie sollen als erstes beachten, dass wir mit Javascript plausibilisieren und das natürlich beim Anwender abgeschaltet werden kann. Wir können mit JavaScript nicht verhindern, dass ein Anwender so einen Formular missbraucht, oder anders ausgedrückt, dass er diese Plausibilisierung von uns wirklich beseitigt. Aber wir können es ihm schwer machen und das versuche ich in diesem Beispiel zu machen und ich versuche auch verschiedene Techniken zu zeigen, wie man Felder plausibilisieren kann , denn bei der User ID fordere ich eine gewisse Länge eines Inhaltes. Beim Passwort habe ich nur ein Pflichtfeld, es kann irgendwas drinstehen, es muss aber etwas drin stehen und bei der E-Mail fordere ich einen ganz bestimmten Inhalt, eine ganz bestimmte Struktur des Inhaltes. Das erlaubt uns drei unterschiedliche Techniken zu sehen, wie man Inhalte von Formularen plausibilisieren kann, was Ihnennoch auffallen sollte ist, dass der Kaser nach der Fehlerprüfung auch in genau dem Feld sitzt, in dem der erste Fehler aufgetreten ist. Auch das ist kein Zufall. Auch das steuern wir auf Javascript heraus und so wird das alles gemacht. Wir haben hier ein Webformular, dass mit Stylesheets formatiert wird und mit einer externen JavaScript Datei verknüpft, wo die ganzen Plausibilisierung laufen. Ich habe versucht so viel wie irgend möglich aus der HTML-Struktur herauszunehmen und sowohl in die Stylesheets, als auch in JavaScript zu verlagern. Je mehr wir mit Javascript Machen, desto schwieriger ist es für einen Anwender, wenn er JavaScript deaktiviert hat, dieses Formular zu missbrauchen, denn er wird immer wieder auf die Situation laufen, dass es ohne JavaScript nicht geht und das wollen wir erreichen an der Stelle ,von daher sehen Sie, dass der Farmtech weder eine Actionangabe hat, wo die Daten hingeschickt werden, Noch, dass es hier einen submit Button gibt. Im Formular selbst gibt es nur Eingabefelder Input- Type –Text, Input- Type - Passwort und nochmal Input – Type – Text, sowie einige Divs , die auf Display Inline-block Gesetz werden, deswegen gibt es ist keinen Zeilenumbruch und hier hinten gibt es noch jeweils einen spezifischen Div auch mit Display inline-block für die Fehlermeldung. Die Button liegen außerhalb von dem Formular, damit kann ich verhindern, dass hier mit submit Button dieses Formular trotzdem ohne Javascript weggeschickt werden kann. Das sind Button die nichts mit der Versendung des Formulars zu tun haben, ein Sicherheitsfeature, um JavaScript zu erzwingen. Schauen wir kurz auf die Stylesheet Datei, die allerdings nicht viele spannede Dinge enthält. Im Wesentlichen gebe ich den Formularen eine gewisse Größe, ich sorge für gewisse Abstände zwischen den Eingabefeldern und diese beiden Divs , die ich benutze zum Anzeigen, also der Beschriftung der Eingabefelder, als auch für die Fehlermeldenungen. Die haben eine gewisse Breite und wenn das Display inline-block formatiert, um einfach um zu verhindern, dass ein Zeilenumbruch entsteht, beachten Sie das geht nur in neuen Browsern. Alte verstehen noch dieses Display inline-block nicht, da müssten Sie eventuell mit Tabellen arbeiten oder Floatingelementen oder was man da auch immer machen kann. Schauen wir uns an, was das Javascript leistet. Ich habe hier eine Funktion init und diese benutzt JavaScript Eventhandler. JavaScript Eventhandler haben den Vorteil, dass sie auch damit die Trennung von Struktur und Funktionanität erreichen und dem Anwender wieder schwerer machen ohne Javascript die Daten zu verschicken. Beim Klick auf den einen Button rufe ich die Funktion Plausi auf und mit einem Klick auf den anderen Button, die Funktion Zurücksetzen und das sind sogenannte Funktionsreferenzen und beim Laden der Webseite, wenn sie fertig ist, rufe ich diese Funktion auf. Das ist die Logik dahinter. Ich habe hier eine Funktionsmeldung leeren und Sie sehen, dass ich die einzelnen Divs anspreche und deren Inhalt lösche, das heißt die Fehlermeldung werden weggeblendet und ich arbeite hier mit dem Styleobjekt und setzte das Stylesheet für die Hintergrundfarbe jeweils auf weiß. Das ist sozusagen der Grundzustand ohne Fehlersituation. Die Funktion Zurücksetzen nimmt das Formular, dann wird dem Anwender ein Dialog angezeigt, das Formular wird zurückgesetzt, er muss bestätigen oder abbrechen mit okay oder abbrechen, wenn er es bestätigt rufe ich diese Funktion auf, dann werden alle Fehlermeldungen beseitigt. Ich setze die Actioneigenschaft des Formulars wieder auf Plenk, um auch diese abzusichern, nicht notwendig aber noch ein Sicherheitsfeature und ich mache einen Reset von dem Formular und zur Sicherheit gebe ich noch mal return false zurück. Dieses return false, als auch dieses, ist im grunde nicht notwendig, so wie wir das Formular konstruiert haben, aber es sind Sicherheitsfeature, dass auf keinen Fall die Formulardaten verschickt werden. Kommen wir zu der eigentlichen Plausibilisierungsfunktion. Ich arbeite mit einer Fehlervariable, die mit false initialisierung und mit einem regulären Ausdruck, der dafür gedacht ist, die E-Mail-Adresse auf eine Struktur zu überprüfen. Die E-Mail Adresse muss einen Klammeraffen enthalten, das @ Zeichen, ein Zeichen davor mindestens haben und ein Zeichen danach. Dann rufe ich die Funktion auf zum Initialisieren eines Grundzustandes ohne Fehlermeldung und ansonsten kontrolliere ich erst die E-Mail, dann das Passwort und die User-ID. Beachten Sie, dass ich hier eine Methode Focus aufrufe. Sobald ein Fehler aufgetreten ist wird der Eingabefokus in das jeweilige Feld gesetzt und da ich von unten nach oben im Formular plausibilisiere, würde der letzte Fehler den ich hier entdecke, das erste Feld auswählen in der Eingabe Richtung, daher wird der Kursor auf dem ersten Feld stehen, wo ein Fehler aufgetreten ist. Dieser Trick funktioniert ja natürlich nur bei unserer spezifische Struktur. Hier sehen Sie bei der Kontrolle der User ID, wie man eine gewisse Lnge, eine Benutzereingabe kontrollieren kann. Das ist ein String, der hat die Eigenschaft length und wenn die kleine acht ist, Fehler. Wenn ich nur ein Pflichtfeld überprüfen möchte, hier muss ich einfach auf Leerstring überprüfen und wenn das ein Leerstring ist, ist das Feld nicht gefüllt, also kann ich ja hier Fehler sagen und hier habe ich die Testfunktion für einen regulären Ausdruck und damit, mit der Struktur das Feld nicht übereinstimmt, Fehler! Ansonsten sehen Sie, dass ich jeweils über innerHTML und die ID eine spezifische Fehlermeldung anzeige, über das Styleobjekt, die Hintergrundfarbe von diesem Eingabefeld manipuliere, das jeweilige fehlerhafte Feld leere und entsprechend hier fokussiere und die Fehlervariabele auf true setzte. Sie kann gerne mehrfach auf true gesetzt werden, das stört ja nicht weiter. Wenn kein Fehler, beachten Sie das Ausrufezeichen, auftritt , setze ich die Fehlervariable wieder auf false, also kein Fehler, setze die Actioneigenschaft von dem Formular und schicke das Formular weg, über die Submitmethode, ansonsten setze ich auch die Fehlerigenschaft zurück für die nächste Überprüfung und gebe den Wert return zurück und das Formular wird nicht verschickt. Das war es. Mittels dieser Technik können Sie nahezu jedes Formular plausibilisieren, wobei es natürlich, muss man festhalten, unterschiedliche Möglichkeiten gibt, die weit über das hinausgehen, was Sie gesehen haben, aber Sie haben hier sehr viel gesehen und das sollte Ihnen die Möglichkeit geben, Formulare soweit es mit Javascript geht, fast richtig, sicher zu plausibilisieren.

JavaScript Grundkurs

Lernen Sie die Möglichkeiten der universellen Sprache JavaScript kennen und machen Sie sich mit der Syntax vertraut, um Ihre Web-Applikationen durch effektive Skripts zu ergänzen.

8 Std. 20 min (134 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!