Validation de formulaire jQuery avancée (1) : vérifier le format d'un numéro de téléphone

Le plugin jQuery Validation est un module d'extension très puissant pour faciliter la validation de formulaire côté client. Parmi ses caractéristiques principales, vous pouvez créer vos propres méthodes de validation. 

Dans cet exemple, nous allons valider un numéro de téléphone français par rapport au format international. Les numéros de téléphone français sont constitués de dix chiffres, commençant par 0 (zéro), groupés par deux et habituellement séparés par des points ou des tirets (exp. : 01 23 45 67 89). Dans le format international, le code pays pour la France (33) préfixe le numéro de téléphone, et le premier chiffre est mis entre parenthèses. Pour une meilleur lisibilité, nous utiliserons l'espace comme séparateur (exp. : 33 (0)1 23 45 67 89). 

Le formulaire de validation est découpé en trois parties : le formulaire HTML, la méthode de validation javascript et l'ensemble des règles de validation en javascript. 

Dans le formulaire HTML, nous établissons la longueur maximale du champ de saisie au cas où javascript serait désactivé, suivant ainsi le principe de la dégradation contrôlée (graceful degradation). Dans tous les cas, les vérifications doivent être aussi faites côté serveur. 

Si les données entrées par l'utilisateur sont reformatées côté serveur, la meilleur pratique consiste à réafficher le formulaire avec les modifications mises en avant pour une dernière validation.

<form id="myFormId" method="post">
    <label for="phoneId">Numéro de téléphone</label>
    <input type="text" name="phone" id="phoneId" maxlength="19" value="" /><br/>
    <input type="submit" value="Envoyer" />
</form>

Le validateur vérifie seulement si le numéro de téléphone est vide (dans ce cas, aucune action n'est effectuée), ou écrit dans le format international attendu. Dans le cas contraire, il envoie un message d'erreur pour affichage. Le noyau du validateur est une expression régulière qui vérifie le format de chaîne attendu. 

L'ensemble des règles de validation les lie à l'identifiant du formulaire (myFormId) et à l'attribut name du champ de saisie du téléphone (phone). La seule règle appliquée est celle définie par le nouveau validateur (myPhoneNumberValidator).

$(document).ready(function(){
    jQuery.validator.addMethod("myPhoneNumberValidator", function(value, element) {
        // no phone number is a good phone number (the field is optional)
        if (value.length == 0) { return true; }
        // if the phone number field is not empty, it has to follow the fixed format
        return /^33 \(0\)\d \d\d \d\d \d\d \d\d$/i.test(value);
    }, 'Veuillez saisir votre numéro de téléphone dans le format suivant : <i>33 (0)1 23 45 67 89</i>');

    $("#myFormId").validate({
        rules: {
            phone: "myPhoneNumberValidator"
        }
    });
});

Nous pouvons aller un peu plus loin en réécrivant directement le numéro de téléphone entré sans séparateur dans le format international attendu durant la vérification. Si le numéro de téléphone n'est pas vide, s'il n'est pas déjà entré dans le format attendu, et s'il est constitué de dix chiffres commençant par un zéro, alors nous le réécrivons dans le format désiré et nous mettons à jour le champ de saisie en conséquence.

        jQuery.validator.addMethod("myPhoneNumberValidator", function(value, element) {
            // no phone number is a good phone number (the field is optional)
            if (value.length == 0) { return true; }
            // if the phone number field is not empty, it has to follow the fixed format
            if(!/^33 \(0\)\d \d\d \d\d \d\d \d\d$/i.test(value)) {
                // ten digits starting with zero
                if (/^0(\d)(\d\d)(\d\d)(\d\d)(\d\d)$/.test(value)) {
                    value = value.replace(/^0(\d)(\d\d)(\d\d)(\d\d)(\d\d)$/, "33 (0)$1 $2 $3 $4 $5");
                    $(element).val(value); // also update the form element
                    return true;
                }
            }
            return /^33 \(0\)\d \d\d \d\d \d\d \d\d$/i.test(value);
        }, 'Veuillez saisir votre numéro de téléphone dans le format suivant : <i>33 (0)1 23 45 67 89</i>');

Advanced jQuery Form validation (1): check a phone number format (en anglais)
Validación de formulario jQuery avanzado (1): como verificar el formato de un número de teléfono (en espagnol)
Validação de formulário jQuery avançado (1): como verificar o formato de um número de telefone (en portugais)