Validierung zweier Datumsfelder mit jQuery

Die clientseitige Validierung zweier Datumsfelder wird im Normalfall mit JavaScript durchgeführt. Leichter läßt sich die Validierung jedoch mit JQuery bewerkstelligen.

Im HTML könnten beispielsweise die beiden Textboxen folgendermaßen implementiert sein:

<table width="100%">
    <tr>
        <td valign="top" width="*" align="right">
            <span id="spnInfoForUser">Ein Startdatum vor dem Enddatum ist ungültig./span>
        </td>
        <td valign="top" width="10%">
            <input class="dateTimePicker" id="Parameters_startDate" type="text" value="09.08.2011" />
        </td>
        <td valign="top" width="10%">
            <input class="dateTimePicker" id="Parameters_endDate" type="text" value="07.09.2011" />
        </td>
    </tr>
</table>

&nbsp;

Das entsprechende JavaScript könnte dann so ausgeführt werden:

 $(document).ready(function () {

    validateDate();
    attachFunctionToTextBoxes();
});

function attachFunctionToTextBoxes()
{
    var tbxCtrlStartDate = $("#Parameters_startDate");
    var tbxCtrlEndDate = $("#Parameters_endDate");
    tbxCtrlStartDate.change(function () {
        validateDate();
    });
    tbxCtrlEndDate.change(function () {
        validateDate();
        validateEndDate();
    });
}

function validateDate()
{
    var date1 = $("#Parameters_startDate").val();
    var date2 = $("#Parameters_endDate").val();
    var spnCtrl = $("#spnInfoForUser");
    if((date1 != null) && (date2 != null))
    {
        var pDate1 = Date.parseLocale(date1, 'dd.MM.yyyy');
        var pDate2 = Date.parseLocale(date2, 'dd.MM.yyyy');
        if (pDate1 <= pDate2)
        {
            spnCtrl.text('');
            spnCtrl.hide();
        }
        else
        {
            spnCtrl.text('Ein Startdatum vor dem Enddatum ist ungültig.');
            spnCtrl.show();
        }
    }
}

function validateEndDate()
{
    var endDate = $("#Parameters_endDate").val();
    var spnCtrl = $("#spnInfoForUser");
    if (endDate != null)
    {
        var pEndDate = Date.parseLocale(endDate, 'dd.MM.yyyy');
        var dateYesterday = new Date();
        dateYesterday.setDate(dateYesterday.getDate() - 1);
        if (pEndDate < dateYesterday)
        {
            validateDate();
        }
        else
        {
            $("#Parameters_endDate").val(dateYesterday.format('dd.MM.yyyy'));
            spnCtrl.text('Ein Enddatum ist nur bis maximal \"gestern\" möglich.');
            spnCtrl.show();
        }
    }
}


Hervorzuheben ist das change Event auf den beiden Checkboxen. Sobald sich in den Checkboxen etwas ändert, werden entsprechende JavaScript Funktionen angetriggert. Ebenfalls zu erwähnen ist dieDate.parseLocale Function. Hierdurch wird unter Verwendung der aktuellen Kultur ein Datum aus einer gebietsschemaspezifischen Zeichenfolge erstellt. Zudem lassen sich die beiden Datumsinformationen erst nach der Anwendung von Date.parseLocale z.B. mit pDate1 <= pDate2 korrekt vergleichen.

Die Fehlerausgabe kann wie im Beispiel in einem Span erfolgen.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>