Validation de formulaire jQuery avancée (2) : valider une date

Après avoir vérifié un numéro de téléphone par rapport au format international, nous allons maintenant vérifier si une date entrée sous forme de chaîne est valide. Nous pourrions bien sûr utiliser un sélecteur de date tel que jQueryUI Datepicker pour faciliter l'expérience utilisateur, mais le but de ce billet est de vous montrer des fonctions de validation de formulaire jQuery avancées, aussi allons-nous utiliser un exemple volontairement simplifié. D'ailleurs, même en utilisant ce sélecteur de date, ce validateur reste utile puisque vos visiteurs peuvent toujours directement entrer une valeur dans le champ de saisie.

Dans le cas présent, nous voulons reconnaître une date au format jj/mm/aaaa (exp. : 01/31/2011), comprise entre le 1^er janvier 2000 et le jour d'aujourd'hui.

Comme toujours, dans le formulaire HTML, nous définissons la longueur maximale du champ de saisie de la date au cas où le javascript serait désactivé (ainsi nous devons nettoyer les données et les valider aussi côté serveur).

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

Le validateur vérifie dans un premier temps si la date est écrite dans le bon format (jj/mm/aaaa), puis si elle est valide (année bissextile, nombre maximum de jours dans le mois en question), et si elle se situe après le 1^er janvier 2000. Bien sûr, le format de date attendu peut être facilement modifié en changeant l'expression régulière et la façon dont les variables year, month et day sont initialisées.

Le message d'erreur utilise le formatage de chaîne de jQuery : il contient une variable entre accolades ({0}) et sa valeur correspondante, dans ce cas l'année entrée (new Array(year)) :

jQuery.format('Le mois de février de l\'année {0} compte au plus 28 jours.', new Array(year));

Nous affichons le message d'erreur grâce à la méthode this.showErrors(errors) où errors lie le message d'erreur au nom de l'élément correspondant.

L'ensemble des règles du validateur de formulaire les lie à l'id du formulaire (myFormId) et au nom du champ de saisie (date). L'unique règle appliquée est définie dans le nouveau validateur (myDateChecker). Nous l'appelons de la façon suivante : date-id: { myDateChecker: true }, cependant il est aussi possible de l'appeler ainsi : date: "myDateChecker" }. C'est une question de style personnel.

$(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('Le mois de février de l\'année {0} compte au plus 28 jours.', new Array(year));
                        this.showErrors(errors);
                    }
                }
                else if (day > 28) {
                    var errors = {};
                    errors[element.name] = jQuery.format('Le mois de février de l\'année {0} compte au plus 28 jours.', new Array(year));
                    this.showErrors(errors);
                }
            }
            else if (month == 4 || month == 6 || month  == 9 || month == 11) {
                if (day > 30) {
                    var errors = {};
                    errors[element.name] = 'Le mois entré compte au plus 30 jours.';
                    this.showErrors(errors);
                }
            }
            else {
                if (day > 31) {
                    var errors = {};
                    errors[element.name] = 'Le mois entré compte au plus 31 jours.';
                    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] = 'Veuillez entrer une date entre 01/01/2000 et aujourd\'hui (format : jj/mm/aaaa).';
                this.showErrors(errors);
            }
            else {
                this.hideErrors();
                return true;
            }
        }
        else {
            var errors = {};
            errors[element.name] = 'Veuillez entrer une date entre 01/01/2000 et aujourd\'hui (format : jj/mm/aaaa).';
            this.showErrors(errors);
        }
        return true;
    });

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

Advanced jQuery Form validation (2): Validate a date (en anglais)
Validación de formulario jQuery avanzado (2): como validar una fecha (en espagnol)
Validação de formulário jQuery avançado (2): como validar uma data (en portugais)