JavaScript/Tutorials/Validierung von Zeitangaben

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Datumsangaben innerhalb von Formularen stellen eine erhebliche Fehlerquelle dar. Aus diesem Grund ist es immer wieder erforderlich, die Gültigkeit eines Datums zu überprüfen. Durch die Verwendung von input type="date" können Sie bereits eine browsereigene Validierung vornehmen.

Validierung mit HTML5

Wie oben schon erwähnt, gibt es mit input type="date" einen bequemen Weg valide Daten zu erfassen. Mobile Browser öffnen sogar einen Kalender, auf dem Sie das passende Datum anklicken können.

In älteren Browser fällt das input-Element auf type="text" zurück, sodass Sie entweder einen der vorhandenen Polyfills verwenden oder die Eingabe durch JavaScript validieren müssen. Früher wurden teilweise auch mehrere select-Felder mit vorgegebenen Werten verwendet, was heute allerdings nicht mehr nötig ist.


Validierung mit dem Date-Objekt

JavaScript stellt mit dem Date-Objekt ein komfortables Mittel zur Überprüfung der Gültigkeit eines Datums zur Verfügung.

Ein neues gültiges Date-Objekt wird mittels new Date(Jahr,Monat,Tag) erzeugt. Dabei ist es nicht unbedingt erforderlich, als Monat oder Tag einen gültigen Wert zwischen 0 und 11 bzw. 1 und 31 anzugeben. Liegt die Angabe außerhalb des Gültigkeitsbereiches, so "zählt" JavaScript einfach weiter. Das bedeutet, dass, wenn z. B. mit new Date(2000,11,32) ein neues Date-Objekt gebildet wird, als Datum der 01.01.2001 zurückgegeben wird.

Es ist nicht einmal erforderlich, zu kontrollieren, ob der Anwender Buchstaben oder Sonderzeichen verwendet hat. Wird das Date-Objekt mit einem ungültigen Wert gebildet, so wird im erzeugten Date-Objekt der Wert NaN gespeichert. Werden Methoden wie z. B. getHours() auf ein Date-Objekt mit dem Wert NaN angewandt, so geben auch diese Methoden NaN zurück.

Zur Kontrolle eines Datums genügt es demnach, einfach aus den eingegebenen Datumswerten ein neues Date-Objekt zu erzeugen und beide Datumswerte zu vergleichen. Stimmen diese überein, so ist das eingegebene Datum richtig, sonst falsch.

Anwendungsbeispiel

Die Funktion gueltigesDatum() erhält als Übergabewert ein Datum in der Form Tag.Monat.Jahr. Dieses Datum soll auf seine Gültigkeit hin überprüft werden. Im Fehlerfall gibt die Funktion false (falsch) sonst true (richtig) zurück.

Beispiel 
  function gueltigesDatum (datum) {
  //(Schritt 1) Fehlerbehandlung
  if (!datum) return false;
  datum = datum.toString();
 
  //(Schritt 2) Aufspaltung des Datums
  datum = datum.split('.');
  if (datum.length != 3) return false;
 
  //(Schritt 3) Entfernung der fuehrenden Nullen und Anpassung des Monats
  datum[0] = parseInt(datum[0], 10);
  datum[1] = parseInt(datum[1], 10)-1;
 
  //(Schritt 4) Behandlung Jahr nur zweistellig
  if (datum[2].length == 2) datum[2] = '20' + datum[2];
 
  //(Schritt 5) Erzeugung eines neuen Dateobjektes
  var kontrolldatum = new Date(datum[2], datum[1], datum[0]);
 
  //(Schritt 6) Vergleich, ob das eingegebene Datum gleich dem JS-Datum ist
  if (kontrolldatum.getDate() == datum[0] && kontrolldatum.getMonth() == datum[1] && kontrolldatum.getFullYear() == datum[2])
  return true; else return false;
}

/* Beispielaufrufe*/

alert(gueltigesDatum("29.02.2000"));
alert(gueltigesDatum("29.02.2001"));

Im ersten Schritt wird geprüft, ob überhaupt ein Wert übergeben wurde. Dieses Vorgehen ist notwendig, da auf undefinierte Objekte die folgenden JavaScript-Methoden nicht angewandt werden können. Da ein fehlender Datumswert kein gültiges Datum ist, wird die Kontrollfunktion an dieser Stelle abgebrochen und gibt false zurück. Anschließend wird der Wert des Parameters datum in einen String umgewandelt. Dies stellt sicher, dass die Methode split() des Stringobjektes angewandt werden kann.

Im Schritt 2 wird das übergebene Datum mittels der Methode split() in seine Bestandteile zerlegt. Trennzeichen ist in diesem Fall der Punkt. Diese Methode bewirkt, dass in der Variablen Datum ein Array gespeichert ist. Da ein dreiteiliges Datum erwartet wird, muss das Array Datum aus genau drei Elementen bestehen. Sind weniger bzw. mehr Elemente vorhanden, handelt es sich um ein ungültiges Datum und die Kontrollfunktion wird abgebrochen und false zurückgegeben.

Im dritten Schritt werden eventuell vorhandene führende Nullen für den Tag und den Monat entfernt. Dieser Schritt sichert, dass in jedem Fall eine gültige vergleichbare Zahl entsteht. Da in JavaScript die Zählung der Monate mit 0 statt mit 1 beginnt, wird der Wert des Monats um eins vermindert.

Im folgenden Schritt wird geprüft, ob es sich um eine zweistellige Jahresangabe handelt. Ist dieser Fall eingetreten, so wird diese in eine vierstellige Jahresangabe konvertiert. Aus der Jahresangabe "02" wird dadurch 2002.

Die bisherigen Arbeitsschritte dienten dazu, den Parameter datum zu überprüfen und für die weitere Verarbeitung vorzubereiten. Daraus wird im fünften Schritt ein Date-Objekt erzeugt und auf der Variablen kontrolldatum gespeichert.

Im letzten Schritt wird unter Verwendung der Methoden getDate() (Monatstag), getMonth() (Monat) und getFullYear() (volles Jahr) geprüft, ob das mit JavaScript erzeugte Datum mit dem Parameter datum übereinstimmt. Tritt dieser Fall ein, so gibt die Funktion true sonst false zurück. Von diesem Rückgabewert können Sie dann die Weiterverarbeitung abhängig machen.

serverseitige Validierung

Auch wenn so schon eine Validierung von Datumseingaben erreicht wird, ist eine serverseitige Validierung, etwa mit der PHP-Methode checkdate, immer empfehlenswert.

Hauptartikel: PHP/Tutorials/Formulare

Weblinks

input type="date"-Polyfills:

Abgerufen von „http://wiki.selfhtml.org/index.php?title=JavaScript/Tutorials/Validierung_von_Zeitangaben&oldid=97918“