CSS, HTML & Javascript mit {stil}

HTML input pattern / valid, invalid

Reguläre Ausdrücke versuchen, Fehler bei komplizierten Angaben im Formular schon bei der Eingabe aufzudecken. Ein typisches Beispiel ist die Postleitzahl, die für Deutschland mit oder ohne "D " oder "D-" beginnt, auf jeden Fall aber aus fünf Ziffern.

HTML input pattern

input required

Reguläre Ausdrücke sind ein 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.

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

<input type="text" id="req" class="pattern" required placeholder="erforderlich">

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

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

Mehr zu regulären Ausdrücken: Regex mit Javascript

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 es 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>
                               ▲
        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.

pattern – also 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.

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.

Auch Javascript hat eine eingebaute Hilfestellung für Formularfelder, deren Eingabewerte durch Attribute wie min, max und pattern beschränkt sind und die durch ein required-Attribut als erforderlich gekennzeichnet sind: checkValidity bringt auch gleich die Fehlermeldungen mit.

formnovalidate

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

Suchen auf mediaevent.de