jQuery: validare una data

  • jQuery
  • Gabriele Romanato

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.

Torna su