Artikel - Detailansicht

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:

<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;
    }


text = datumstring.replace(/[^0-9.,-\/]/g,"");


zahlen = text.split(/[ ,.\-\/]/);


    if (zahlen.length != 3) {
        falsches_datum(this_handle);
        return false;
    }


mtage = new Array (0,31,28,31,30,31,30,31,31,30,31,30,31);
tag   = zahlen[0]*1;


monat = zahlen[1]*1;
jahr = zahlen[2]*1;
if (ist_Schaltjahr(jahr)){
    mtage[2] = 29};


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;
    }
   if (tag   < 10){
    tag   = "0" + tag
    }


    if (monat < 10){
    monat = "0" + monat;
    }

this_handle.value = (tag + "." + monat + "." + jahr);


db_date = ( jahr + "-" + monat + "-" + tag);
eval( "document." + this_handle.form.name + ".D_" + this_handle.name +
  ".value = '" + db_date + "'");
return true;

}


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

Das deutsche ColdFusion-Forum cfml.de ist das Portal für Einsteiger und Experten zum Thema ColdFusion und der ColdFusion Markup Language (CFML).

© 2020 Webdesign & Hosting: CHC ONLINE Kassel | SOLVA Content-Management-System CMS
Urlaub-Angebote.de - Urlaub mit Bestpreis-Garantie buchen