HTML5-Eingabevalidierung mit eigener Fehlermeldung

HTML5 bietet uns verschiedene Möglichkeiten, Eingabetypen zu spezifizieren, inklusive clientseitiger Validierung. Eingabefelder können als required markiert werden, und es ist sogar möglich, reguläre Ausdrücke als Pattern für gültige Eingaben anzugeben.

Setzen wir das in die Praxis um und erstellen ein Eingabefeld für deutsche Postleitzahlen, bestehend aus 5 Ziffern:

Wie man sieht, funktioniert das, aber die angezeigte Fehlermeldung bei einer falschen Eingabe ist etwas generisch (“Ihre Eingabe muss mit dem geforderten Format übereinstimmen.”). Besser wäre es, wenn die Meldung beschreibt, wie eine korrekte Postleitzahl aussehen muss.

Glücklicherweise gibt es eine Möglichkeit, die anzuzeigende Meldung über die JavaScript-Methode setCustomValidity festzulegen (leider gibt es keine Möglichkeit, dies über ein weiteres Attribut wie z.B. pattern-invalidmessage zu tun).

Bei der Verwendung der setCustomValidity-Methode gibt es allerdings ein konzeptionelles Problem: Wird sie auf einem Eingabefeld gesetzt, wird dieses automatisch als ungültig markiert – egal ob es ansonsten völlig korrekt ist!

In unserem Fall wollen wir die Meldung also nur setzen, nachdem der Browser festgestellt hat, dass das Feld nicht dem Pattern entspricht – gewissermaßen als zweiter Fehler auf dem Feld. Die Meldung soll in einem weiteren Attribut namens data-invalidmessage angegeben werden. Das folgende CoffeeScript erledigt genau das:

Das fertige, funktionierende Beispiel: