jQuery: validare una data

Solitamente quando si pensa alla validazione delle date con jQuery si finisce per discutere del formato da usare nelle espressioni regolari. Validare un formato di data come gg/mm/aaaa con le espressioni regolari è molto semplice. Il problema è che questo controllo non basta. Infatti si può inserire una data come 00/00/0000 e passare la validazione. Vediamo come ovviare al problema.

Una volta scelto il formato della data occorre operare una quadruplice validazione:

1. formato (gg/mm/aaaa)
2. giorno
3. mese
4. anno

Per il formato basta un'espressione regolare, per il giorno e il mese occorre invece verificare che il valore inserito non superi un limite minimo e massimo. Per esempio il giorno non può essere inferiore a 1 o superiore a 31, e il mese non può essere inferiore a 1 o superiore a 12.

Anche per l'anno vale lo stesso discorso: l'anno non può essere superiore a quello corrente (ossia una data del futuro) o inferiore ad una determinata data nel passato (per esempio 100 anni). Ovviamente questi sono valori puramente indicativi.

Ecco la nostra implementazione:

$('#date').submit(function(e) {
    e.preventDefault();
    if ($('#errors').length) {
        $('#errors').remove();
    }
    var datetime = $('#datetime').val();
    var errors = '';
    if (!/^\d{2}\/\d{2}\/\d{4}$/.test(datetime)) {
        errors += '<span class="error">Not a valid date format</span>';
    } else {

        var parts = datetime.split('/');
        var day = parts[0];
        var month = parts[1];
        var year = parts[2];
        var $day = (day.charAt(0) == '0') ? day.charAt(1) : day;
        var $month = (month.charAt(0) == '0') ? month.charAt(1) : month;

        if ($day > 31 || $day < 1) {
            errors += '<span class="error">Not a valid day</span>';
        }

        if ($month > 12 || $month < 1) {
            errors += '<span class="error">Not a valid month</span>';
        }

        var now = new Date();
        var currentYear = now.getFullYear();

        if (year > currentYear || year < (currentYear - 100)) {
            errors += '<span class="error">Not a valid year</span>';
        }


    }

    if (errors != '') {
        $('<div id="errors"/>').html(errors).appendTo('#date');
    } else {

        alert('Valid date');
    }





});

Potete visionare l'esempio finale in questa pagina.