Validación de formulario jQuery avanzado (1) : como verificar el formato de un número de teléfono

El plug-in jQuery Validation es un potente plug-in para facilitar la validación de formulario del lado del cliente. Entre sus principales características, usted puede crear sus propios métodos de validación. 

En este ejemplo, vamos a validar un número de teléfono francés según el formato internacional. 

Los números de teléfono francés son compuesto de diez dígitos, comenzando por 0 (cero), agrupados por dos y generalmente separados por puntos o guiones (ejemplo: 01 23 45 67 89). En el formato internacional, el código de país para Francia (33) prefija el número de teléfono, y el primer dígito está entre paréntesis. Para una mejor legibilidad, utilizaremos el espacio como separador (ejemplo: 33 (0)1 23 45 67 89). 

El formulario de validación se divide en tres partes: el formulario HTML, el método de validación javascript y el conjunto de reglas de validación en javascript. 

En el formulario HTML, decimos la longitud máxima del campo de entrada en el caso del javascript estar desactivado, siguiendo así el principio de la degradación controlada (graceful degradation). En todos los casos, las verificationes deben también hacerse en el lado del servidor. Si los datos introducidos por el usuario están formateados en el servidor, la mejor práctica consiste en mostrar de nuevo el formulario con los cambios resaltados para su validación final.

<form id="myFormId" method="post">
    <label for="phoneId">Número de teléfono</label>
    <input type="text" name="phone" id="phoneId" maxlength="19" value="" /><br/>
    <input type="submit" value="Enviar" />
</form>

El código de validación verifica sólo si el teléfono está vacío (en este caso, no se toman medidas), o escrito en el formato internacional esperado. En el caso contrario, envía un mensaje de error. El núcleo del código de validación es una expresión regular que comprueba el formato de la cadena esperada. 

El conjunto de las reglas de validación les une al identificador del formulario (myFormId) y al atributo name del campo de entrada del teléfono (phone). La única regla aplicada es la definida por el nuevo código de validación (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);
    }, 'Por favor, introduzca su número de teléfono en el siguiente formato: <i>33 (0)1 23 45 67 89</i>');

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

Podemos dar un paso más escribiendo directamente el número de teléfono entrado sin separador en el formato internacional esperado durante la verificación. Si el número de teléfono no está vacío, si no está ya entrado en el formato esperado, y si consta diez dígitos comenzando por un cero, entonces escribimoslo en el formato deseado y actualizamos el campo de entrada.

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);
}, 'Por favor, introduzca su número de teléfono en el siguiente formato: <i>33 (0)1 23 45 67 89</i>');

Advanced jQuery Form validation (1): check a phone number format (en inglés)
Validation de formulaire jQuery avancée (1) : vérifier le format d'un numéro de téléphone (en francés)
Validação de formulário jQuery avançado (1): como verificar o formato de um número de telefone (en portugués)