
Datumscheck für Eingabeformulare
Wer Datumseingaben über HTMl-Formulare realisieren will hat oft
das Problem der verschiedensten Möglichkeiten der Eingabe. Mit dem entsprechenden
Javascript lassen sich aber gute Datumskontrollfunktionen schreiben.
Eine sehr universelle Datumsroutine soll im folgenden vorgestellt werden. Diese
Datumsfunktion erledigt folgende Aufgaben:
1. Trennzeichen bei Eingabe beliebig (.-/,) Praktisch da im Zehnerblock
kein Punkt.
2. Pruefung auf gueltiges Datum und gueltiges Datumsformat.
3. Zurueckschreiben eines formatierten Datums ins Eingabefeld.
4. Automatisches umwandeln ins Datenbankformat und beschreiben eines Hidden-Felds
mit diesem Wert.
Funktionsweise: Bei jeder Änderung eines Datumsfeldes wird
die Routine "check_date" aufgerufen. Da die Formularfelder natürlich auch
von ColdFusion vorbelegt sein können oder eine Fehlermeldung durch den
Benutzer ignoriert werden kann, wird beim Abschicken des Formulars die Routine
"check_form" aufgerufen.
Hier muss für jedes Datumsfeld ein Aufruf der Routine "check_date" stehen.
Ein Abschicken des Formulars mit ungültigen Werten ist somit unmöglich.
Anwendung: Es muss für jedes Datumsfeld ein zweites Hidden-Feld
mit dem gleichen Namen und einem vorangestellten "D_" vorhanden sein. Alles
weitere siehe Beispiel.
Anpassungen: Anpassungen müssen vorgenommen werden, wenn Leere
Datumsfelder nicht erlaubt sind oder z.B. zweistellige Jahreszahlen zugelassen
werden. Auch der gültige Jahreszahlenbereich muss bei Bedarf angepasst
werden.
Hier das Eingabeformular inkl. des Javascript-Codes:
<!--- 18.05.00 Jan Meyer --->
<script LANGUAGE=JAVASCRIPT>
<!--
<!--------------------------------------------------------------------->
function ist_Schaltjahr(j) {
return ((j % 4 == 0) && ((j % 100!= 0) || (j % 400 == 0)))
}
<!--------------------------------------------------------------------->
function falsches_datum(this_handle) {
t1 = "Ungültiges Datumsformat: >> " + this_handle.value + " <<\n\n"
t2 = "Erlaubte Trennzeichen: ', . / -' \n\n
Jahreszahl: 4stellig (1980-2020)\n\n";
t3 = "z.B.: 01-12-2000 1.12.2000 31/12/2000
17,7,2000" alert(t1 + t2 + t3 + "\n\n[" + this_handle.name +
"]"); this_handle.focus();
}
<!--------------------------------------------------------------------->
function check_date(this_handle){
datumstring = this_handle.value;
if (datumstring == "") {
return true;
}
<!--- Leeres Feld ist gueltig --->
<!--- Formale Pruefung --->
text = datumstring.replace(/[^0-9.,-\/]/g,"");
<!--- Ungueltige Zeichen entfernen --->
zahlen = text.split(/[ ,.\-\/]/);
<!--- In tt mm jjjj auftrennen --->
if (zahlen.length != 3) {
falsches_datum(this_handle);
return false;
}
<!--- Bereichspruefung --->
mtage = new Array (0,31,28,31,30,31,30,31,31,30,31,30,31);
tag = zahlen[0]*1;
<!--- String in Zahl wandeln --->
monat = zahlen[1]*1;
jahr = zahlen[2]*1;
if (ist_Schaltjahr(jahr)){
mtage[2] = 29};
<!--- Februar bei Schaltjahr korrigieren --->
if ((jahr < 1980) || (jahr >2020)) {
falsches_datum(this_handle);
return false;
}
if ((monat < 1) || (monat > 12)) {
falsches_datum(this_handle);
return false;
}
if ((tag < 1) || (tag > mtage[monat])) {
falsches_datum(this_handle);
return false;
}
<!--- Ausgabe formatieren --->
if (tag < 10){
tag = "0" + tag
}
<!--- Formatierung 2stellig --->
if (monat < 10){
monat = "0" + monat;
}
<!--- Formatierten Eingabewert ins Formular zurueckschreiben --->
this_handle.value = (tag + "." + monat + "." + jahr);
<!--- Formatierten 'D_'-Wert ins Formular zurueckschreiben --->
db_date = ( jahr + "-" + monat + "-" + tag);
eval( "document." + this_handle.form.name + ".D_" + this_handle.name +
".value = '" + db_date + "'");
return true;
<!--- Wenn die Routine bis hier gekommen ist, dann ist alles OK --->}
<!------------------------------------------------------------------->
function check_form(){
if (check_date(document.datum_test_form.Datum_1) == false){
return false
};
if (check_date(document.datum_test_form.Datum_2) == false){
return false
};
return true;
}
-->
</script>
<HTML><HEAD>
<TITLE>Test-Formular für Datumseingaben</TITLE>
</HEAD>
<BODY>
<DIV ALIGN="center">
<FONT SIZE="+2"><B>Test-Formular für Datumseingaben</B></FONT>
<FORM ACTION="datum_test_action.cfm" METHOD="post" NAME="datum_test_form"
TARGET="_new" onSubmit="return check_form()">
<TABLE BORDER="1" BGCOLOR="#DBDBFF">
<TR>
<TD>
<TABLE>
<TR>
<TD>
<FONT SIZE="+1">Datum_1</FONT></TD>
<TD>
<INPUT TYPE="text" NAME="Datum_1"
onChange="check_date(this)">
<INPUT NAME="D_Datum_1" TYPE="hidden"></TD>
</TR>
<TR>
<TD>
<FONT SIZE="+1">Datum_2</FONT></TD>
<TD>
<INPUT TYPE="text" NAME="Datum_2"
onChange="check_date(this)">
<INPUT NAME="D_Datum_2" TYPE="hidden"></TD>
</TR>
<TR>
<TD COLSPAN="2" ALIGN="CENTER">
<INPUT TYPE="submit" VALUE=" OK "></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</FORM>
</DIV>
</BODY>
</HTML>
alle Files zum Download
Jan Meyer an.meyer@kathrein.de - 01.06.2000