HTML5 Grundkurs

Formularvalidierung mit Markup

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Da viele der neuen HTML5-Formularfelder semantische Informationen über die Art des Inhalts enthalten, ist eine Validierung der Eingaben zumindest teilweise durchaus möglich. Einige Browser unterstützen dies bereits vollautomatisch, ohne dass dafür programmiert werden müsste.
07:22

Transkript

Bei den neuen Formularelementen von HTML5 haben wir semantische Informationen mit dabei, es ist ein Zahlenfeld, es ist ein E-Mail-Feld, etc. Diese semantischen Informationen können auch von Browsern aus gelesen werden, um damit beispielsweise eine Validierung anzubieten. Damit ein Feld validiert wird, müssen mehrere Bedingungen erfüllt sein, zunächst muss es ein Formularfeld sein, wo der Browser Validierungsregeln unterstützt. Es ist nicht bei allen Feldern so, aber beispielsweise bei e-mail und url, nicht jedoch bei telefon. Eine Telefonnummer ist international so unterschiedlich, da gibt es keine einheitlichen Regeln, e-mail, url festgelegt. Die zweite Bedingung ist, das Ganze muss sich in einem Formularfeld befinden, das auch innerhalb von einem Formular steckt. Wir haben hier dieses form-Element. Alternativ kann man bei jedem Formularfeld, auch das ist neue in HTML5, die ID eines Formulars irgendwo anders auf der Seite angeben, hauptsache eben diese Verknüpfung ist erfüllt. Der nächste Bedingung, das Formularfeld muss ein name-Attribut haben, einen Namen. Wir haben das hier teilweise gemacht, hier zunächst weggelassen. Jetzt gibt es Browser, die diese Voraussetzungen ignorieren, sprich die Validieren auf Formularfeldern mit einem Namen, andererseits nur wenn das name -Attribut gesetzt wird, wird ein Formularfeld beim Formularversand auch an den Server geschickt. da man diese Formularfelder wohl für genau diesen Zweck eingeführt hat, sollte man als das name-Attribut setzen, deswegen ziehe ich das hier bei einigen Feldern noch nach, damit wir dann eben diese Validierung direkt integriert haben. Nehmen wir mal diese drei hier und ziehen die beiden auch noch nach, auch wenn wir die jetzt nicht validieren werden, aber dann ist es hier komplett und außerdem nächste Bedingung, das Feld muss auch aktiv sein, darf also kein Schreibschutz haben, also kein read-only-Attribut gesetzt. Was auch nicht sein darf, ist das, dass das Feld disabled ist, dann wird es nämlich auch nicht an den Server geschickt, deswegen ist eine Validierung nicht besonders sinnig. Dies sind die Voraussetzungen und wir werden das uns direkt mal anschauen, gehen also in unserem Browser Google Chrome und ergänzen wieder die URL, in dem Fall localhost:10111111, wie gesagt, bei Ihnen möglicherweise leicht anders und dann probieren wir mal ein paar falsche Eingaben, zum Beispiel eine E-Mail-Adresse, die jetzt noch unproblematisch. wenn ich jetzt das Formular links versenden will, kommt hier diese Fehlermeldung: Die Adresse muss ein @-Zeichen enthalten. In der Angabe "email" fehlt ein @-Zeichen. Es ist relativ hilfreich, füllen wir also mal ein @-Zeichen ein, wunderbar, versenden. Geben Sie etwas nach dem @-Zeichen ein. Die Angabe"email@" ist unvollständig. Ok, also "email@domain." vielleicht, kommen Sie der Wahrheit etwas näher, möglicherweise. Das Punktzeichen "." steht in "domain." an einer falschen Stelle. Der nimmt es aber genau, also nehmen wir "email@domain.tdl" und jetzt tatsächlich wurde das Formular verschickt und wir sehen in der URL stehen die entsprechenden Daten. Das heißt, wir haben hier eine Validierung dieser Wehrte, diese Validierung findet statt ohne, dass wir JavaScript hätten. Und Sie erinnern sich sicher, JavaScript wurde eigentlich aus einem einzigen Grund entwickelt, damit die Formulare validieren können, aber das ist jetzt aufgrund diese semantischen Informationen hier direkt möglich und es natürlich ein sehr sehr praktisches Feature, denn damit bekommen wir eine Validierung einfach für lau, selbst bei Nutzern, die JavaScript deaktiviert haben. Jetzt ist es so, dass wir eine ganze Reihe von weiteren Attributen haben. Jetzt rund um HTML5, wir sehen hier in der Liste eben, dass das durchaus eine ganze Menge ist und einige von verdienen noch eine besondere Erwähnung. Zum Beispiel gibt es das Attribut und required also Pflichtfeld. Dieses E-Mail-Feld muss ausgefüllt werden, denn bis dato, ich gehe noch mal zurück ohne neu laden, wenn ich das Feld hier lehre und das Formular verschicke, passt das wunderbar, aber ich lade jetzt mal neu, gespeichert ist der auch und probiere das von Layots, leer abzuschicken. Fühlen sie dieses Feld aus. sehr interessant, das heißt, auch hier wieder klassische Validierung, aber auf Basis von JavaScript freien Programmieren. also eigentlich gar kein Programmieren reinlich Attribute weil wir die semantischen Informationen im Feld mitgeben, dieses Feld ist ein Pflichtfeld, das was natürlich äußerst interessant. Jetzt können wir das Ganze auch noch auf mehre Arten und Weisen erweitern. Eine Möglichkeit, zum Beispiel besteht darin, dass wir ein Muster angeben pattern und dieses Muster ist ein regulärer Ausdruck und die Eingabe sofern vorhanden muss diesen regulären Ausdruck genügen. Könnten wir also beispielsweise sagen eine E-Mail-Adresse die angegeben wird muss eine ".de" E-Mail-Adresse sein aus welchem Grund auch immer. Das heißt, E-Mail-Adresse muss enden auf ".de". Punkte setzten Sonderzeichen bei regulären Ausdrücken, also backslash vorne dran "de" und dann soll ja die E-Mail-Adresse oder die Eingabe enden. Deswegen "$" hinten, "$" ist im regulären Ausdruck das Zeichen für das Ende der Eingabe in dem Fall. Speichern auch das ab, haben jetzt eben das Muster entsprechen angegeben, gehen wieder zurück, laden noch einmal neu und geben jetzt eine E-Mail-Adresse "email@domain.at" , senden. Ihre Eingabe muss mit dem geforderten Format übereinstimmen. Das heißt auch dieser Aspekt wird jetzt mit überprüft out-of-the-box. Wir haben also sowohl die semantischen Informationen aus dem type Attribut, hier eben es ist eine E-Mail-Feld, wir haben das zusätzliche Attribut required-Pflichtfeld, wir haben das Attribut pattern für ein Muster und haben damit eigentlich schon eine ganze Reihe von klassischen Validierungsangaben, also die Eingabe muss einem bestimmten Muster genügen, die Eingabe muss überhaupt erst getätigt werden, beim Pflichtfeld, die Eingabe muss von einem bestimmten Typ sein, dass direkt out-of-the-box, dank HTML5 Formularen. Schauen wir uns das doch noch mal in einem anderen Browser an. Nehmen wir die Firefox und auch hier wieder formular.html hinten angehängt, ein bißchen größer gemacht und ich gebe jetzt auch wieder eine falsche E-Mail-Adresse ein und hier sehen wir sogar direkt, wenn wir das Feld per Tab verlassen, bekommt es einen roten Rahmen. Das heißt, diese Validierung wird sozusagen live ausgeführt und diese live Validierung wird dann auch markant dargestellt. Maus fährt drüber, wir sehen dann sogar den entsprechenden Fehler: Bitte geben Sie eine E-Mail-Adresse ein. Der Versuch das Ganze dann zu versenden, sorgt wieder für diese kleine Animation und die Einblendung einer entsprechenden Fehlermeldung. Das heißt, jeder Browser hat so ein bißchen seine eigene Art und Weise, wie er die Validierung handhabt und vor allem wer die optisch handhabt. Sprich also wie das Ergebnis dann aussieht, wie das dargestellt wird. Ob es sofort erscheint, ob es erst beim Versand erscheint, aber eines bleibt gleich diese Validierung ist eben jetzt direkt vorhanden, ohne dass wir noch programmieren müssen.

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!