Validação de formulário jQuery avançado (1) : como verificar o formato de um número de telefone

O plug-in jQuery Validation é um poderoso plug-in para facilitar a validação de formulário no lado do cliente. Entre as suas características principais, você pode criar os seus próprios métodos de validação.

Neste exemplo, vamos validar um número de telefone francês em relação ao formato internacional. 

Os números de telefone francês são compostos por dez dígitos, começando por 0 (zero), agrupados por dois e, geralmente, separados por pontos ou hífens (exemplo: 01 23 45 67 89). No formato internacional, o código do país para a França (33) prefixa o número de telefone, e o primeiro dígito fica entre parênteses. Para uma melhor legibilidade, usaremos o espaço como separador (exemplo: 33 (0)1 23 45 67 89). 

O formulário de validação é dividido em três partes: o formulário HTML, o método de validação javascript e o conjunto de regras de validação em javascript. 

No formulário HTML, dizemos o comprimento máximo do campo de entrada no caso do javascript ser desativado, seguindo assim o princípio da degradação controlada (graceful degradation). Em todos os casos, as verificações também devem ser feitas no lado do servidor. Se os dados introduzidos pelo usuário estão formatados no servidor, a melhor prática é mostrar novamente o formulário com as mudanças em destaque para a validação final.

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

O código de validação verifica apenas se o telefone está vazio (neste caso, nenhuma ação é tomada), ou escrito no formato internacional esperado. No caso contrário, envia uma mensagem de erro. O núcleo do código de validação é uma expressão regular que verifica o formato da cadeia esperada. 

O conjunto das regras de validação liga-as ao identificador do formulário (myFormId) e ao atributo name do campo de entrada do telefone (phone). A única regra aplicada é a regra definida pelo novo código de validação (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, digite o seu número de telefone no formato: <i>33 (0)1 23 45 67 89</i>');

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

Podemos ir um passo além disso escrevendo diretamente o número de telefone entrado sem separador no formato internacional esperado durante a verificação. Se o número de telefone não está vazio, se ainda não está entrado no formato esperado, e se tem dez dígitos começando com um zero, então lo escrevemos no formato desejado e atualizamos o 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, digite o seu número de telefone no formato: <i>33 (0)1 23 45 67 89</i>');

Advanced jQuery Form validation (1): check a phone number format (em inglês)
Validation de formulaire jQuery avancée (1) : vérifier le format d'un numéro de téléphone (em francês)
Validación de formulario jQuery avanzado (1): como verificar el formato de un número de teléfono (em espanhol)