 Datumsprüfung 02 3 Eingabefelder
Das Script entnimmt den Inhalt der Eingabefelder und prüft auf gültige Werte. Anders als im Beispiel Datumsprüfung01 sind hier 3 Eingabefelder deklariert. Optional kann überprüft werden, ob der eingetragene Datumswert in der Vergangenheit liegt (Bezug auf aktuelles Datum)
|
|
Eingabe der Datumswerte auf Gültigkeit prüfen
UPDATE erweiterte Fehlererfassung / -kompensation (auch Jahr zweistellig)
Datum prüfen
Die Prüfung der Eingabe erfolgt hier im Beispiel beim Klicken des Buttons über einen JavaScript-Eventhandler: onclick="DatumPruefen()"
Prüfung der Eingaben:
- Eingabeformat, nur Ziffern sind erlaubt
- ungültiges Werte Tageszahl, Monatsabhängig (30 / 31)
- ungültiges Werte Tageszahl, Februar (Schaltjahr)
- ungültiges Werte Monatszahl, (1 bis 12)
- Eingabe kleiner / gleich aktuelles Datum (optional)
Datenformat:
- einstelligen Einträgen für den Tag wird eine Null vorangestellt
- einstelligen Einträgen für den Monat wird eine Null vorangestellt
- zweistelligen Einträgen für das Jahr wird '20' vorangestellt
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 die Eingabefelder mit den IDs "DatumTa", "DatumMo" und "DatumJa". Beispiel für das Eingabefeld Monatstag:
var dy = document.getElementById("DatumTa").value;
Übernehme in diesem Dokument die Eingabe, die im Textfeld mit der ID "DatumTa" steht.
Lege in der Variablen 'dy' das ab, was (in diesem Dokument) im Textfeld mit der ID "DatumTa" steht. Anders formuliert: Der Wert der Variablen 'dy' ist das, was (in diesem Dokument) im Textfeld mit der ID "DatumTa" 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 notieren die zusätzlichen Eingabefelder für das Datum innerhalb von <form>-Tags im Body. Die IDs der Eingabefelder für das Datum sollen 'DatumTa' bzw. 'DatumMo' und 'DatumJa' 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 beim Absenden des Formulars einleiten. Dazu wird in der Notierung für den 'Sende-Button' (Submit) zusätzlich der Aufruf zur Prüfung eingetragen oder im <form>-Tag das 'onsubmit' Attribut notiert.
<input type="Submit" value="Senden" onclick="DatumPruefen()">
Wenn gleich beim Verlassen der Eingabefelder eine Prüfung stattfinden soll, könnte der Aufruf der Funktion auch im Input-Tag für das Jahr mit 'OnBlur' notiert werden. Diese Verfahrensweise ist aber unsicher, da der Nutzer nicht unbedingt die Jahreszahl als letzten Eintrag vornimmt. OnBlur bedeutet: Beim Verlassen
<input onBlur="DatumPruefen()" type="text" ...
Option
Sollen lediglich Einträge erlaubt sein, die entweder gleich oder größer als das aktuelle Datum sind, dann setzen Sie die Variable Vergangenheit auf "nein".
Vergangenheit = "nein";
CSS-Formatierung der Textfelder
Zwei unterschiedlich breite Eingabefelder werden mit CSS formatiert.
im Head-Bereich
<style type="text/css">
<!--
.datum2 {
border: 1px solid #6D93E1;
background-color: #EFEFEF;
width:20px;
text-align:center;
}
.datum4 {
border: 1px solid #6D93E1;
background-color: #EFEFEF;
width:40px;
text-align:center;
}
-->
</style>
im Body-Bereich
Tag/Monat: <input type="text" class="datum02" ...
Jahr: <input type="text" class="datum04" ...
|
Home • Datum • Datumsprüfung 02
QuellCode