HTML input pattern / valid, invalid

HTML input pattern

Pattern oder Muster mit einem regulären Ausdruck versuchen, Fehler bei komplizierten Angaben im Formular schon bei der Eingabe aufzudecken. Ein typisches Beispiel ist die Postleitzahl, die für Deutschland mit einem "D " oder "D-", auf jeden Fall aber gefolgt von fünf Ziffern bestehen kann.

Reguläre Ausdrücke sind zwar ein kleines Wespennest und sehen aus, als wäre die Katze über die Tastatur gestiefelt, aber der schmerzhafte Einstieg lohnt sich, denn reguläre Ausdrücke werden in vielen Anwendungen benutzt.

input required

Erst mal etwas einfaches: Ein Eingabefeld mit required ist erforderlich und muss ausgefüllt werden.

<input type="text" name="req" required>

CSS:required in einer Kette zeigt dem Benutzer, dass er das erforderliche Eingabefeld ausgefüllt hat.

input#req:required:valid { border-color:blue}

pattern

Das pattern-Attribut des eines input-Tags kann die Eingabe durch reguläre Ausdrücke auf bestimmte Eingabemuster einschränken. Reguläre Ausdrücke gibt sie als Einschluss in fast allen Programmiersprachen, aber auch Programm-Editoren und Textverarbeitungsprogramme bieten reguläre Ausdrücke beim Suchen und Ersetzen.

Ein einfacher regulärer Ausdruck beschreibt z.B. Wörter, die mit "C" anfangen oder Zeichenfolgen, die aus genau fünf Ziffern bestehen (z.B. Postleitzahlen).

Beschränkt die Eingabe auf 5 Ziffern (Postleitzahl).

       ^ : Beginnt mit    --+      +-- genau 5
                            |      |
<input type="text" pattern="^[0-9]{5}$" required value="" />
                               |
                               +-- Ziffern von 0 bis 9
  1. Das Symbol ^ steht für den Anfang der Zeichenkette.
  2. Der Ausdruck in eckigen Klammern bestimmt, welche Zeichen akzeptiert werden – hier nur die Ziffern von 0 bis 9.
  3. Die Zahl in den geschweiften Klammern sagt, dass genau 5 Ziffern vorhanden sein sollen.
  4. $ ist das Zeichen für das Ende der Zeichenkette. Dahinter darf kein weiteres Zeichen folgen.

Aber was ist, wenn der Benutzer vor der Postleitzahl D- oder D eingibt oder D und dann ein Leerzeichen vor den 5 Ziffern?

pattern="^[D -]{0,2}[0-9]{5}$"

Das Muster darf mit bis zu zwei Zeichen beginnen, am Anfang dürfen "D" oder "D " oder "D-" stehen (maximal 2 Zeichen {0,2}). Zwar würde das Feld auch die Eingabe -D 54321 akzeptieren, aber lassen wir es einfach mal gut sein.

Mit einer entsprechenden Eigenschaft für input:invalid im CSS zeigt der Browser an, dass Eingaben nicht mit der Anforderung im Muster / Pattern übereinstimmen.

Der Browser hebt die Fehleranzeige erst nach der ersten korrekten Eingabe auf.

Das pattern-Attribut – besser reguläre Ausdrücke – sind Hexenkessel. Zwar finden wir im Web reguläre Ausdrücke für die verschiedensten Anwendungen, aber sobald reguläre Ausdrücke ein komplexes Muster wie Email oder Datum validieren sollen, müssen viele Extras berücksichtigt werden. Datum und Email überlässt man am besten dem Input-Typ: input type="date" und input type="email".

invalid – Hilfestellung per CSS

Für Felder, die durch eine Vorgabe eingeschränkt sind, hat CSS die Pseudoklassen valid, invalid und required. Mit input:invalid {background: "#EECBAF"} im CSS zeigt der Browser an, dass Eingabe noch nicht mit der Anforderung im Muster / Pattern übereinstimmt.

Dennoch muss die Benutzereingabe durch ein Script und/oder durch die Anwendung auf dem Server validiert werden, denn der Nutzer kann einen alten Browser verwenden, der das pattern-Attribut nicht unterstützt.

Attribut für einzelne Eingabefelder: Ob der Browser die Eingabe in dieses Feld validieren soll.

Nur Fließkommazahlen mit Punkt oder ",". Wenn ein Punkt ein Komma gesetzt wird, müssen 1 oder zwei Nachkommastellen folgen

<style>
input:invalid { background: hsl(5,30%,80%) }
input:valid   { border-color: blue}
</style>
…
<input type="text" pattern="[0-9]*[.|,]{0,}[0-9]{1,2}">

Was bedeutet [0-9]*[.|,]{0,}[0-9]{1,2}? Der Ausdruck akzeptiert Zeichenfolgen, die

  1. [0-9]* Mit Ziffern von 0 bis 9 anfangen [0-9] – und zwar mit beliebig vielen davon (* steht für 0 oder mehr),
  2. [.|,]{0,} u.U. gefolgt von einem Punkt oder Komma [.|,]. {0,} sagt nämlich: Punkt oder Kamma muss nicht sein. Eine 101 wäre also korrekt.
  3. [0-9]{1,2} Aber wenn ein Punkt oder Komma gesetzt wurden, dann müssen eine, maximal 2 Ziffern zwischen 0 und 9 folgen

Mit einem einfachen Eingabefeld, einem pattern-Attribut und einem Hauch von CSS haben wir also schon einen Test für reguläre Ausdrücke.

formnovalidate

Attribut für form-Tag: Ob der Browser das komplette Formular validieren soll oder nicht.