Datumsvalidierung über Pattern

Mit HTML5 zogen viele neue input-Typen in den Standard ein. Neben den bekannten Typen namens text, password, submitreset, button, checkboxselect und radio gibt es nun einige weitere, die es einem ermöglichen seiner Website mehr Semantik zu geben und außerdem einige syntaktische Prüfungen der Eingabe direkt und nativ durch den Browser stattfinden zu lassen. An dieser Stelle sei natürlich angemerkt, dass eine Prüfung der Eingabe auf Serverseite stets unerlässlich ist.

Einer der neuen Typen ist auch der date-Typ. Der ist ziemlich fancy, denn er lässt in Browsern, die die Rendering-Engine blink nutzen, ein Popup eines Kalenders erscheinen. Firefox unterstützt in aktuellen Versionen diesen Typen jedoch nicht. Und mir persönlich ist diese Eingabemethode im Desktop-Browser zu umständlich. Ich habe daher nach einer besseren Möglichkeit gesucht.

Eine Möglichkeit, die ich hier aufzeigen möchte, ist weiterhin den Input-Typen text zu nutzen, jedoch ein Pattern mit anzugeben, sodass im Browser das Datum weiterhin auf seine Korrektheit geprüft wird. Als placeholder gibt man ein Datumsbeispiel an, sodass der Nutzer darüber informiert ist, in welcher Weise er hier das Datum angeben soll:

<input type="text" pattern="(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31)).(?:(?:0[1-9]|1[0-2]).(?:19|20)[0-9]{2}" placeholder="30.02.1988"/>

Daraus ergibt sich dieses Eingabefeld:

Schauen wir einmal kurz auf das Pattern. Es unterteilt sich in drei Teile für Tag, Monat und Jahr jeweils durch Punkte getrennt. Monat und Jahr sind relativ unspektakulär. Hier wird nur geprüft, ob der Monat eine Zahl von 1 bis 12 darstellt und da wir hier ein Geburtsdatum abfragen, habe ich die Eingabe des Jahres auf 1900 bis 2099 beschränkt. Man könnte auch noch etwas genauer prüfen und das aktueller Jahr als Randbedingung nehmen, aber eine solche Angabe würde eh durch die serverseitige Prüfung abgefangen und soll hier einmal nicht betrachtet werden.

Die Eingabe eines Tages ist etwas trickreicher. Wir müssen zwischen Monaten mit 30 und 31 Tagen unterscheiden – und Februar. Letzterer hat im Normalfall nur 28 Tage, manchmal – im Schaltjahr – aber 29. Der Einfachheit halber nehmen wir also 29 Tage an.

Nachteile

Die Nachteile dieser Art der Datumsabfrage liegt leider auf der Hand: In mobilen Browsern ist die Eingabe eines Datums über die Tastatur eventuell etwas mühsamer. Für Verfechter von mobile first dürfte diese Implementierung also nicht in Frage kommen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.