Validación de formulario jQuery avanzado (2): como validar una fecha

Después de comprobar un número de teléfono con el formato internacional, vamos ahora comprobar si una fecha entrada como una cadena es válida. Por supuesto, podríamos utilizar un selector de fechas como jQueryUI Datepicker para facilitar la experiencia del usuario, pero el propósito de este artículo es mostrarles funciones de validación de formulario jQuery avanzadas, por lo que utilizaremos un ejemplo deliberadamente simplificado. Además, incluso usando este selector de fechas, este validador es todavía útil, ya que sus visitantes pueden entrar directamente un valor en el campo de entrada.

En el presente caso, queremos reconocer una fecha en el formato dd/mm/aaaa (por ejemplo, 01/31/2011), entre el 1^° de enero de 2000 y el día de hoy. 

Como siempre, en el formulario HTML, definimos la longitud máxima del campo de entrada de la fecha en el caso del javascript estar desactivado (así debemos limpiar los datos y validarlos del lado del servidor).

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

El código de validación verifica en un primer paso si la fecha está escrita en el formato esperado (dd/mm/aaaa), luego si es válida (año bisiesto, número máximo de días de este mes), y si es después del 1^° de enero de 2000. Por supuesto, el formato de la fecha esperada se puede modificar fácilmente al cambiar la expresión regular y la manera en la que las variables year, month y day están inicializadas.

El mensaje de error utiliza la cadena de formato de jQuery: contiene una variable entre llaves ({0}) y su valor correspondiente, en este caso, el año entrado (new Array(year)):

jQuery.format('El mes de febrero del año {0} tiene 28 días como máximo.', new Array(year));

Mostramos el mensaje de error con el método this.showErrors(errors) onde errors une el mensaje de error con el nombre del elemento correspondiente.

El conjunto de las reglas de validación les une al identificador del formulario (myFormId) y al nombre del campo de entrada (date). La única regla aplicada es la definida por el nuevo código de validación (myDateChecker). Le llamamos de la siguiente manera: date-id: { myDateChecker: true } Sin embargo, también es posible llamarlo así: date: "myDateChecker" }. Es una cuestión de estilo personal.

$(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('El mes de febrero del año {0} tiene 28 días como máximo.', new Array(year));
                        this.showErrors(errors);
                    }
                }
                else if (day > 28) {
                    var errors = {};
                    errors[element.name] = jQuery.format('El mes de febrero del año {0} tiene 28 días como 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] = 'El mes entrado tiene 30 días como máximo.';
                    this.showErrors(errors);
                }
            }
            else {
                if (day > 31) {
                    var errors = {};
                    errors[element.name] = 'El mes entrado tiene 31 días como 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, introduzca una fecha entre el 01/01/2000 y hoy (formato: dd/mm/aaaa).';
                this.showErrors(errors);
            }
            else {
                this.hideErrors();
                return true;
            }o
        }
        else {
            var errors = {};
            errors[element.name] = 'Por favor, introduzca una fecha entre el 01/01/2000 y hoy (formato: dd/mm/aaaa).';
            this.showErrors(errors);
        }
        return true;
    });

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

Advanced jQuery Form validation (2): Validate a date (en inglés)
Validation de formulaire jQuery avancée (2) : valider une date (en francés)
Validação de formulário jQuery avançado (2): como validar uma data (en portugués)