HTML5 Grundkurs

Formularvalidierung mit Code

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Validierung von HTML5-Formularfeldern ist zwar vollautomatisch, aber auch per JavaScript bleibt eine Prüfung möglich – entweder zur Statusermittlung oder zur Implementierung eigener Prüfroutinen.
09:31

Transkript

Wir haben gesehen, dass wir Formularelemente ohne Zuhilfenahme von Javascript validieren können. Allerdings kann man trotzdem mit Javascript eingreifen in diese Validierung, denn wenn uns das, was sozusagen vorgegeben ist und mitgeliefert wird, nicht ausreicht, müssen wir selber programmiertechnisch tätig werden. Das Schöne ist, wir können natürlich wie bisher auch ganz klassisch validieren, uns selber um die Anzeige von Fehlermeldungen kümmern, um das Layout et cetera, aber wir können auch in diesen Validierungsmechanismus eingreifen und eben per Javascript. Dazu gibt es mehrere Möglichkeiten und die schauen wir uns jetzt an. Das heißt zuerst nehmen wir das Formular, gehen zu unserem Google Chrome, wo es eh noch offen ist - nehmen wir gleich die offene Variante - und ich aktiviere jetzt die F12-Tools, in den F12-Tools kann ich nämlich über die Javascript-Console ensprechend Dinge mir ansehen. Und zwar, ich greife jetzt zunächst mal auf das Formular zu und dann auf die Felder, deswegen speichere ich das Formular in einer Variablen ab, spar ich mir ein bisschen tippen. Also: "var f = document.forms[0];" Ich greife also auf das erste Formular auf der Seite zu. Jetzt ist diese Variable "f" angelegt, dieses "undefined" bedeutet nur, dass dass diese Anweisung keine Rückgabe hat. Und jetzt schaue mir an "f.elements" und wir sehen auch die Auto-Ergänzung und schau jetzt beispielsweise mal das E-Mail-Feld an und sehe mir dann die Gültigkeit an. Die steht in einer Eigenschaft namens "validity". Und das ist etwas vom Typ "validity state" und hat jetzt eine ganze Reihe von Eigenschaften: "badInput", "customError", "patternMismatch", et cetera, also ganz viele mögliche Fehlerfälle. Zum Beispiel "patternMismatch", ich geb ein Muster an, also ein Muster, so wie wir es vorher bei den regulären Ausdrücken hatten und dieses Muster ist jetzt nicht erfüllt. Dann wäre das hier "true", in dem Fall ist es "false", weil, naja, das Muster tritt ja nur ein, wenn ich überhaupt etwas eingegeben habe. "Overflow", "Underflow", jeweils wenn ich einen Bereich angebe wie bei "range" und dann einen zu hohen oder zu niedrigen Wert angebe. Ich kann auch eine Schrittweite angeben, beim Nummernfeld, sodass ich beispielsweise immer um zwei nach oben springe, wenn ich dann auf einmal eine ungerade Zahl habe, will nicht passen, das wäre dann ein Fall für "stepMismatch". Eingabe kann auch zu lang sein, kann auch den falschen Typ haben, aber alles "false". Passt also alles, ja. Und dann gibt's die Eigenschaft "valid". Ist die Eingabe gültig? Und das ist sie nicht, denn das ist "false". Tja, was ist denn das Problem? Von diesen Eigenschaften ist immer genau eine "true", in dem Fall "valueMissing". Also: Wir haben einen Wert, der nicht angegeben ist, also, wir haben ein Pflichtfeld, wir haben ja das "required"-Attribut, Sie erinnern sich, deswegen "valueMissing: true". Fehlt ein Wert? Ja, der fehlt. Nun gut, das können wir korrigieren, indem wir zum Beispiel eine E-Mail-Adresse angeben: "email@". So. Schauen wir wieder in unsere "Developer Tools" und werfen nochmal einen Blick auf diese "validity"-Informationen. Jetzt ist "valueMissing: false", steht ja ein Wert drin. Und wie immer, quasi alles ist "false", nur eins ist "true", beziehungsweise maximal zwei, in dem Fall, jetzt kommen nämlich zwei Sachen gleichzeitig zu tragen: "typeMismatch", wir haben den falschen Datentyp, das ist nämlich keine E-Mail-Adresse. Ach, und übrigens, wir haben hier noch das Muster, "patternMismatch". Das ist auch nicht erfüllt, denn das Ganze endet nicht auf ".de". Okay? Passen wir es an: "email@.de". Schauen uns wieder den Wert von "validity" an. Und jetzt ist das Muster trotzdem nicht korrekt erfüllt. Und vor Allem der entsprechende Typ ist auch nicht korrekt angegeben. Dadurch, dass der Typ schon mal falsch ist, ist entsprechend die Musterprüfung dann hier nachranging an der Stelle. Das heißt also, ich kann auch per Javascript auf den Wert der Validierung, auf den aktuellen Status sozusagen, zugreifen, weiß immer wann ein Wert wahr ist, oder wann ein Feld korrekt ausgefüllt ist und wann eben nicht. Es gibt sogar Pseudo-CSS Klassen, mit denen ich weiß, ob ein Feld korrekt oder inkorrekt ausgefüllt ist. Ich könnte also per CSS selbst angeben, wie das Feld dann dargestellt werden soll. Beispielsweise roter Rahmen oder irgendetwas anderes oder Warndreieck daneben et cetera. Das ist Variante 1. Also das ist sozusagen die eine Möglichkeit, die ich habe, nämlich dass ich mich auf diesen "validity"-Wert hocke und dann entsprechend hiermit reagiere auf die Validierung und jeweils immer sofort einen aktuellen Status habe. Es gibt aber auch noch eine zweite Variante und diese zweite Variante, die beinhaltet dann tatsächlich die Programmierung mit Javascript, denn da führe ich mit Javascript selbst eine eigene Validierung aus. Der "use case", den ich jetzt exemplarisch umsetze, ist, dass wir irgendeine veraltete Datenbank haben mit einer veralteten Datenbankstruktur und die E-Mail-Adresse darf maximal, sagen wir mal, 20 Zeichen lang sein. Das ist jetzt vielleicht keine besonders sinnvolle Anwendung, aber eine, die relativ leicht umzusetzen ist, und mit genau derselben Technik können Sie dann komplexe, eigene Validierungen umsetzen. Beispielsweise Validierung einer ISBN wegen Prüfziffer, Validierung einer IBAN. Sie wissen ja vielleicht, bei der IBAN, dritte und die vierte Stelle sind ja die Prüfziffern von dem was folgt, sodass quasi ein Vertippen schwieriger wird, wenn man es geschafft hat, diese ganz lange Nummer und die beiden Buchstaben überhaupt zu tippen. Und, genauso etwas lässt sich eben umsetzen und als vereinfachtes Beispiel, uns geht's ja vor Allem um die Technik, nicht um die Programmierung per se, nehmen wir einfach eine entsprechende Längenangabe. Wie funktionniert das? Ich lege zuerst einmal einen Javascript- Blog an und in diesem Javascript-Blog, da kümmere ich mich jetzt zunächst mal um die eigentliche Validierung. Ich lege dazu einfach eine Funktion an: "pruefeEmail" und in dieser Funktion schaue ich mir mal dieses E-Mail-Feld an. Also: "var email = document.forms[0]. elements["emails"]. Damit greifen wir also auf das E-Mail-Feld zu und dann schaue ich mir den Wert an, also, die Werteigenschaft des Feldes. Das ist nämlich der Text in dem E-Mail-Feld, und da interessiert mich natürlich die Länge. Ob die Länge '<= 20' ist. Dann ist nämlich alles okay. Und ansonsten haben wir einen Fehler. Also: "ok!" und "Fehler!". So. Und was können wir da jetzt tun? Wir können natürlich irgendwie den Formularversand vielleicht unterbinden, aber wir wollen uns ja irgendwie auch einklinken in diesen Validierungsmodus. Und deswegen gibt es jetzt folgende Möglichkeit. Und zwar, wenn wir das E-Mail-Feld selber nehmen, dann gibt es eine Methode, die hier das Intellisense uns nicht automatisch liefert, aber eben die hat jedes Formularfeld und zwar und zwar heißt das "setCustomValidity". Also wir können sozusagen die Gültigkeit setzen und das machen wir sowohl im Fehlerfall, als auch wenn Ordnung ist. Im Fehlerfall geben wir einfach die Fehlermeldung an, also zum Beispiel: "Die Email-Adresse ist zu lang!" und damit wird automatisch dieses E-Mail-Feld in den Fehlerzustand versetzt. Das heißt für das E-Mail-Feld wäre die "validity.valid"-Eigenschaft jetzt "false". Und bei "setCustomValidity", im Falle von Länge '<= 20', also alles okay, setzen wir diese Gültigkeit wieder zurück auf eine leere Zeichenkette. Leere Zeichenkette bedeutet hier für den Browser: Kein Fehler. Das Einzige, was wir jetzt tun müssen, ist, dass wir diese "pruefeEmail"-Funktion aufrufen und zwar zum einen beim Versand, und ich füge das jetzt direkt über Attribute ein, in das html-Markup und könnte das jetzt natürlich etwas sauberer direkt in Javascript lösen, aber ich denke so ist es hier angemessen, das heißt normalerweise würde man jetzt sagen "return pruefeEmail" und wenn es einen Fehler bei der Überprüfung gibt, würde "pruefe Email" "false" zurückliefern, dieses "return" "false" würde dann den Formularversand verhindern. Aber wir klinken uns ja in diesen Browsermechanismus ein, brauchen wir also nicht, brauchen keinen Rückgabewert. Wir rufen einfach "pruefeEmail" auf und das könnten wir eigentlich auch aufrufen, wenn der Wert im Feld sich ändert. Wir könnten also auch "onchange="pruefeEmail" aufrufen. Das heißt also sobald der Benutzer hier etwas Anderes eingibt und dann per Tab das Feld verlässt oder eben woanders hinklickt, sodass das Feld den Fokus verliert und wenn das Formular verschickt werden soll, dann wird diese E-Mail-Prüfung aufgerufen. Schauen wir uns das an, gespeichert ist's. Dokument ist hier eh noch unter korrekter URL offen, neu geladen und jetzt gebe ich hier eine gültige E-Mail-Adresse an: "email@sehrsehrsehrsehrlangedomain.de". Eigentlich eine gültige Email, halt nur sehr sehr lang. Ich tabe raus. Und habe jetzt automatisch die Überprüfung. Der Fehlerfall ist schon da, das heißt im Firefox beispielsweise wäre das jetzt markiert. Chrome, hatten wir ja gesehen, sorgt für die richtige Validierung erst beim Versenden und hat ja auch keine grafische Ansicht automatisch. Klicke also hier auf "Senden" und dann "Die Email-Adresse ist zu lang!", das heißt meine eigene Fehlermeldung erscheint. Und damit haben wir komplette Eingriffsmöglichkeit in diese Validierung, egal ob das Vorgefertigte etwas für uns ist, oder ob wir manuell eigene Überprüfungsroutinen haben. Hier lassen sich also die eingebauten funktionalen Möglichkeiten, die eigentlich Javascript ablösen, wunderbar verbinden mit dem, was uns Javascript sonst so bietet.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 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!