[ Input Pattern ]

Formularfelder validieren

  Input Pattern

Formularfelder validieren

Jeder Webdesigner hat in seiner Laufbahn schon etliche Formulare erstellt. Dann wurde wahrscheinlich ein mehr oder weniger komplizierter JavaScript-Code eingebunden, um vor dem Absenden des Formulars zu überprüfen, ob die eingegebenen Werte gültig sind und ob alle erforderlichen Felder ausgefüllt wurden.

Das ist jetzt etwas einfacher geworden. Mit HTML5 können Eingabe-Felder in Web-Formularen bereits bei der Eingabe vom Browser mit einem Muster, das die Gültigkeit der Eingabe beschreibt, verglichen werden. Für eine clientseitige Formularvalidierung nutzt Du heute einfach die neuen Attribute wie pattern und required. Zusammen mit CSS3-Selektoren für die optischen Effekte wird das Schreiben von Prüfmechanismen und die Meldung von fehlerhaften Eingaben wesentlich vereinfacht. Die Muster sind Vorlagen oder Schablonen in die die eingegebenen Daten passen müssen.

Das Erstellen eines Musters (eines pattern) ist eine kleine Hürde für den Webseitengestalters. Selbst wenn er ein CMS, eine Blogsoftware, ein Redaktionssystem nutzt, die Pattern muss er (noch) selbst erstellen. Sind fertige Lösungen schon eingebaut, muss er sie zumindest prüfen und verstehen. Laut den Vorgaben des World Wide Web Consortium (W3C) werden die Regular Expressions der ECMAScript Language (JavaScript) angewandt. (aktuell: ECMA262 Edition 5 -Kapitel 15.10.1 Patterns).

Mit Formular-Pattern und einen guten Browser kann man erstaunlich viel testen, trotzdem muß eine weitere Prüfung der eingegebenen Daten, wie zum Beispiel die Berechnung einer Prüfziffer und die Plausibilität immer noch zusätzlich durchgeführt werden.

Natürlich ist es wie immer. Nicht alle Browser haben die Prüfung komplett und richtig implantiert. Aber das wird in Zukunft sicher besser werden.

Alle Test für dieses Tutorial wurden mit Firefox Version > 34 und in Teilen mit IE 11 unter dem BS Win7 gemacht. Weitere Test stehen noch aus.

Foto: Zebra

Hier ist ein kleines Tutorial, ein paar Übungen sowie 1000 Beispiele und ein Tester.


Reguläre Ausdrücke

Der Muster-Vergleich mit regulärer Ausdrücken wird seit langem in diversen Programiersprachen genutzt, und es gibt etliche Tutorials dazu. Ein regulärer Ausdruck (englisch regular expression, Abkürzung: RegExp oder Regex) ist in der Informatik eine Zeichenkette, die der Beschreibung von Mengen von Zeichenketten mit Hilfe bestimmter syntaktischer Regeln dient. Reguläre Ausdrücke finden vor allem in der Softwareentwicklung Verwendung. Neben Implementierungen in vielen Programmiersprachen verfügen auch viele Texteditoren über reguläre Ausdrücke in der Funktion „Suchen und Ersetzen“. Ein einfacher Anwendungsfall von regulären Ausdrücken sind Wildcards, die fast jeder kennt. " *.pdf " in des Suchfeld eingegeben und es werden alle PDF-Dateien gefunden.

Reguläre Ausdrücke können als Filterkriterien in der Textsuche verwendet werden, indem der Text mit dem Muster des regulären Ausdrucks abgeglichen wird. Dieser Vorgang wird auch Pattern Matching genannt. So ist es beispielsweise möglich, alle Wörter aus einer Wortliste herauszusuchen, die mit S beginnen und auf D enden – ohne die dazwischenliegenden Buchstaben oder deren Anzahl explizit vorgeben zu müssen.

In diesem Tutorial geht es ausschließlich um die Muster (die pattern), die der Screendesigner bei der Erstellung eines Web-Formulars dem Browser als Vergleichsmuster zur Verfügung stellt.