Validação de formulário jQuery avançado (2): como validar uma data

Depois de verificar o formato de um número de telefone, vamos agora verificar se uma data entrada como uma cadeia de caracteres é válida.

Com certeza, poderiamos usar um selecionador de data como jQueryUI Datepicker para facilitar a experiência do usuário, mas o propósito deste artigo é mostrar-lhes as funções de validação de formulário jQuery avançadas, assim usamos um exemplo deliberadamente simplificado. Além disso, mesmo usando o selecionador de data, este validador ainda é útil, porque os seus visitantes podem entrar diretamente um valor no campo de entrada.

Neste caso, queremos reconhecer uma data no formato dd/mm/aaaa (por exemplo, 01/31/2011), entre o 1^° de janeiro de 2000 e o dia de hoje.
Como sempre, no formulário HTML, definimos o comprimento máximo do campo de entrada da data no caso do javascript ser desativado (por isso temos de limpar os dados e validá-os do lado do servidor).

<form id="myFormId" method="post">
    <label for="dateId">Data</label>
    <input type="text" name="date" id="dateId" maxlength="10" value="" /><br/>
    <input type="submit" value="Enviar" />
</form>

O código de validação verifica numa primeira etapa se a data é escrita no formato esperado (dd/mm/aaaa), depois se é válida (ano bissexto, número máximo de dias desse mês), e se é depois do 1^° de janeiro de 2000. Com certeza, o formato da data esperada pode ser facilmente modificado com a mudança da expressão regular e a maneira pela qual as variáveis year, month e day são inicializadas.

A mensagem de erro usa a cadeia de formato jQuery: contém uma variável entre colchetes ({0}) e o valor correspondente, neste caso, o ano entrado (new Array(year)):

jQuery.format('O mês de fevereiro do ano {0} tem 28 dias, no máximo.', new Array(year));

Mostramos a mensagem de erro com o método this.showErrors(errors) onde errors junta a mensagem de erro com o nome do elemento correspondente.

O conjunto das regras de validação liga-as ao identificador do formulário (myFormId) e ao atributo name do campo de entrada (date). A única regra aplicada é a regra definida pelo novo código de validação (myDateChecker). Chama-se da maneira seguinte: date-id: { myDateChecker: true } Contudo, também é possível chamá-lo assim: date: "myDateChecker" }. É uma questão de estilo pessoal.

$(document).ready(function(){
    jQuery.validator.addMethod("myDateChecker", function(value, element) {
        // value: dd/mm/yyyy
        if(/^\d\d\/\d\d\/\d\d\d\d/i.test(value)) {
            // check valid date
            var year = substr(value, 6, 4);
            var month = substr(value, 3, 2);
            var day = substr(value, 0, 2);
            if (month == 2) {
                if (day == 29) {
                    if (year % 4 != 0 || year % 100 == 0 && year % 400 != 0) {
                        var errors = {};
                        errors[element.name] = jQuery.format('O mês de fevereiro do ano {0} tem 28 dias, no máximo.', new Array(year));
                        this.showErrors(errors);
                    }
                }
                else if (day > 28) {
                    var errors = {};
                    errors[element.name] = jQuery.format('O mês de fevereiro do ano {0} tem 28 dias, no máximo.', new Array(year));
                    this.showErrors(errors);
                }
            }
            else if (month == 4 || month == 6 || month  == 9 || month == 11) {
                if (day > 30) {
                    var errors = {};
                    errors[element.name] = 'O mês entrado tem 30 dias, no máximo.';
                    this.showErrors(errors);
                }
            }
            else {
                if (day > 31) {
                    var errors = {};
                    errors[element.name] = 'O mês entrado tem 31 dias, no máximo.';
                    this.showErrors(errors);
                }
            }

            var today = new Date();
            today.setHours(23);
            today.setMinutes(59);
            today.setSeconds(59);
            var new_epoch = new Date('2000', '0', '1');
            var entered_date = new Date(year, month - 1, day, 23, 59, 59);
            if ((entered_date > today) || (entered_date < new_epoch)) {
                var errors = {};
                errors[element.name] = 'Por favor insira uma data entre o 01/01/2000 e hoje (formato: dd/mm/aaaa).';
                this.showErrors(errors);
            }
            else {
                this.hideErrors();
                return true;
            }
        }
        else {
            var errors = {};
            errors[element.name] = 'Por favor insira uma data entre o 01/01/2000 e hoje (formato: dd/mm/aaaa).';
            this.showErrors(errors);
        }
        return true;
    });

    $("#myFormId").validate({
        rules: {
            date: "myDateChecker"
        }
    });
});

Advanced jQuery Form validation (2): Validate a date (em inglês)
Validación de formulario jQuery avanzado (2): como validar una fecha (em espanhol)
Validation de formulaire jQuery avancée (2) : valider une date (em francês)