 Datumsprüfung 01 1 Eingabefeld
Das Script entnimmt den Inhalt des Eingabefeldes (Datum) und prüft auf gültige Werte. Optional kann überprüft werden, ob der eingetragene Datumswert in der Vergangenheit liegt (Bezug auf aktuelles Datum)
|
|
Datumseingabe auf Gültigkeit prüfen
update 05.07.2008 Erfassung der Eingabe über getElementById
update 18.03.2012 erweiterte Prüfungen und präzise Fehlermeldungen
 |
Script-Version: 18. März 2012 20:00 Uhr - In diesem Datums-Modul verwende ich ein neues Script. Die Funktionen zum Auszug der einzelnen Datumssegmente, zur Datums- prüfung und für die Anzeige der Fehlermeldungen wurden völlig überarbeitet und sind mit der Vorgängerversion nicht kompatibel. |
Hier gibt es lediglich ein einziges Formularfeld zur Erfassung der Eingabe. Das macht (wenn Sie in den Quelltext schauen) eine Menge JavaScript-Arbeit erforderlich. Schließlich muss man neben der Prüfung auf ein gültiges Datumsformat die Eintragung 'auseinanderbröseln' um Tages-, Monats- und Jahreswerte dann einzeln zu untersuchen. Sie möchten ja Einträge wie '31.04.2020' als ungültig erkennen, da der April nur 30 Tage hat.
Eine  Datenerfassung über 3 Felder (Tag, Monat, Jahr) wäre eine Alternative.
Übrigens kümmert es JavaScript absolut nicht, wenn ein Wert wie '31.04.2020' übergeben werden würde (das ist weitgehend unbekannt). Ohne Murren würde dann mit dem 30. April 2020 plus 1 Tag weiter gerechnet. Das entspräche aber dem 1. Mai 2020.
Datum prüfen
Die Prüfung, ob das eingetragene Datum bereits vertrichen ist, wurde hier eingeschaltet!
Die Prüfung der Eingabe erfolgt hier bei Klick: onclick="PruefeDatum()"
Prüfung der Eingaben:
- leeres Eingabefeld
- Eingabeformat, Trennzeichen soll ein Punkt sein
- Länge (10 Zeichen)
- Zeichen (erlaubt: Ziffern + Punkt)
- Wert Tageszahl, Monatsabhängig (28 / 29, 30 / 31)
- Wert Tageszahl, Februar (Schaltjahr)
- Wert Monatszahl, (1 bis 12)
- Wert Jahreszahl, (> 1970)
- Datum kleiner aktuelles Datum (optional)
Erklärung
Nach meinem Update wird zur Erfassung der Eingabe der Bezug nicht mehr über den Formular- und Feldnamen, sondern direkt über die ID des Textfeldes hergestellt. Die Funktion für die Prüfung bezieht sich nun also auf das Datum-Eingabefeld mit der ID "DatumFeld03".
Eingabe = document.getElementById('DatumFeld03').value;
Lege in der Variablen 'Eingabe' das ab, was (in diesem Dokument) im Textfeld mit der ID "DatumFeld03" steht. Anders formuliert: Der Wert der Variablen 'Eingabe' ist das, was (in diesem Dokument) im Textfeld mit der ID "DatumFeld03" eingetragen wurde.
Anpassung an ihr Formular
Wenn Sie dieses Script in ihr bestehendes Formular einbinden möchten, kopieren Sie den Code zur Prüfung in den Head-Bereich Ihres HTML-Dokuments und den Code für das Textfeld innerhalb der <form>-Tags Ihres Formulars. Die ID des Eingabefeldes für das Datum soll 'DatumFeld03' sein.
Prüfung der Eingaben
Hier im Beispiel wird die Prüfung erst auf einen Klick ausgelöst!
onclick="PruefeDatum();"
Die Auslösung der Prüfung (hier noch über den Button 'Prüfen'), können Sie zum Beispiel auch beim Absenden des Formulars einleiten. Dazu wird in der Notierung für den 'Sende-Button' (Submit) zusätzlich der Aufruf zur Prüfung eingetragen.
<input type="Submit" value="Senden" onclick="PruefeDatum()">
Wenn gleich beim Verlassen des Eingabefeldes eine Prüfung stattfinden soll, wird der Aufruf im Input-Tag notiert. OnBlur bedeutet: Beim Verlassen
<input onblur="PruefeDatum()" type="text" ...
Option
Sollen lediglich Datumseinträge erlaubt sein, die größer als das aktuelle Datum sind, dann setzen Sie die Variable 'DatumVergangenheit' auf "nein", ansonsten auf "ja".
DatumVergangenheit = "nein";
CSS-Formatierung des Prüfe-Buttons und Textfeldes
im Head-Bereich
<style type="text/css">
<!--
.button01
{
cursor: hand;
border: 1px solid #6D93E1;
background-color: #C4D3F6;
font-size:11px;
color:#003080;
width:90px;
}
.datum01
.datum01 {
font-size:11px;
line-height:15px;
color:#0070C0;
border: 1px solid #6D93E1;
background-color: #EFEFEF;
width:90px;
height:18px;
text-align:center;
}
-->
</style>
im Body-Bereich
<input type="text" class="datum01" ...
<input type="button" class="button01" onClick="Pruefe ...
|
Home • Datum • Datumsprüfung 01
Demo