Como incluir uma máscara de CPF e CNPJ com validação (Javascript)

Post ensinando a como incluir uma máscara de CPF e CNPJ com validação no mesmo campo, utilizando apenas Javascript.

Máscara de CPF e CNPJ com validação

Os códigos e funções utilizadas foram escritos em javascript puro. Você não irá precisar se preocupar com a inclusão de bibliotecas na sua página, como jQuery.

A primeira parte do código estão as funções em javascript que serão necessárias para gerar a mascará no campo.

Crie um arquivo JS com o seguinte código.

function mascaraMutuario(o, f) {
    v_obj = o
    v_fun = f
    setTimeout('execmascara()', 1)
}

function execmascara() {
    v_obj.value = v_fun(v_obj.value)
}

function cpfCnpj(v) {

    v = v.replace(/\D/g, "")

    if (v.length <= 11) {
        v = v.replace(/(\d{3})(\d)/, "$1.$2")
        v = v.replace(/(\d{3})(\d)/, "$1.$2")
        v = v.replace(/(\d{3})(\d{1,2})$/, "$1-$2")

    } else { 
        v = v.replace(/^(\d{2})(\d)/, "$1.$2")        
        v = v.replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3")     
        v = v.replace(/\.(\d{3})(\d)/, ".$1/$2")       
        v = v.replace(/(\d{4})(\d)/, "$1-$2")
       
    }

    return v
}

Não esqueça de referenciar o arquivo JS na página aonde está o campo que iremos colocar a mascara e validar.

Adicione dentro da tag head do seu site, exemplo: <script src=”validacao-e-mascara-js”></script>

Selecionando o campo desejado

Agora temos que selecionar o campo que desejamos aplicar a máscara, para isso utilizamos:

var aux = document.getElementById('cnpj');

aux.onkeypress = function() {
    mascaraMutuario(this, cpfCnpj);
}

aux.maxLength = 18;

Altere a primeira linha:

var aux = document.getElementById(‘cnpj_cnpj’);

Substituindo o ‘cnpj_cnpj’ pelo ID do campo desejado.

Funções para validar o CPF e CNPJ

De nada adianta uma mascará se você não validar os valores finais do CPF ou CNPJ, correto?

Então vamos validar, primeiro você deve adicionar no mesmo arquivo .js as funções a seguir:

function validarCPF(cpf) {
     cpf = cpf.replace(/[^\d]+/g,'');    
    if(cpf == '') return false; 
    // Elimina CPFs invalidos conhecidos    
    if (cpf.length != 11 || 
        cpf == "00000000000" || 
        cpf == "11111111111" || 
        cpf == "22222222222" || 
        cpf == "33333333333" || 
        cpf == "44444444444" || 
        cpf == "55555555555" || 
        cpf == "66666666666" || 
        cpf == "77777777777" || 
        cpf == "88888888888" || 
        cpf == "99999999999")
            return false;       
    // Valida 1o digito 
    add = 0;    
    for (i=0; i < 9; i ++)       
        add += parseInt(cpf.charAt(i)) * (10 - i);  
        rev = 11 - (add % 11);  
        if (rev == 10 || rev == 11)     
            rev = 0;    
        if (rev != parseInt(cpf.charAt(9)))     
            return false;       
    // Valida 2o digito 
    add = 0;    
    for (i = 0; i < 10; i ++)        
        add += parseInt(cpf.charAt(i)) * (11 - i);  
    rev = 11 - (add % 11);  
    if (rev == 10 || rev == 11) 
        rev = 0;    
    if (rev != parseInt(cpf.charAt(10)))
        return false;       
    return true;   
}


function validarCNPJ(cnpj) {
 
    cnpj = cnpj.replace(/[^\d]+/g,'');
 
    if(cnpj == '') return false;
     
    if (cnpj.length != 14)
        return false;
 
    // Elimina CNPJs invalidos conhecidos
    if (cnpj == "00000000000000" || 
        cnpj == "11111111111111" || 
        cnpj == "22222222222222" || 
        cnpj == "33333333333333" || 
        cnpj == "44444444444444" || 
        cnpj == "55555555555555" || 
        cnpj == "66666666666666" || 
        cnpj == "77777777777777" || 
        cnpj == "88888888888888" || 
        cnpj == "99999999999999")
        return false;
         
    // Valida DVs
    tamanho = cnpj.length - 2
    numeros = cnpj.substring(0,tamanho);
    digitos = cnpj.substring(tamanho);
    soma = 0;
    pos = tamanho - 7;
    for (i = tamanho; i >= 1; i--) {
      soma += numeros.charAt(tamanho - i) * pos--;
      if (pos < 2)
            pos = 9;
    }
    resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
    if (resultado != digitos.charAt(0))
        return false;
         
    tamanho = tamanho + 1;
    numeros = cnpj.substring(0,tamanho);
    soma = 0;
    pos = tamanho - 7;
    for (i = tamanho; i >= 1; i--) {
      soma += numeros.charAt(tamanho - i) * pos--;
      if (pos < 2)
            pos = 9;
    }
    resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
    if (resultado != digitos.charAt(1))
          return false;
           
    return true;
    
}

Adicione também no arquivo JS o seguinte código, para que a validação possa ocorrer.

aux.onblur = function() {
 clearTimeout();
 var str = this.value;
 if(str.length == 14){ 
  if( ! validarCPF(str) ){ 
   alert("CPF inválido, por favor corrija!"); 
  } 
 }else if(str.length == 18){ 
  if( !validarCNPJ(str)){
   alert("CNPJ inválido, por favor corrija!");
  } 
 }
}

No evento onblur, que ocorre quando o usuário “sai” do campo, executamos  as funções validarCPF e validarCNPJ para realizar as validações de acordo com a quantidade de dígitos no campo.

Aonde temos 14 para CPF e 18 para o CNPJ. Eu utilizo um “alert” para avisar o usuário que o valor digita é inválido, você pode também apagar o valor do campo utilizando:

document.getElementById('cnpj_cnpj').value = "";

Conclusão máscara de CPF e CNPJ com validação

Para desenvolvedores: As mascaras e validações não anulam a necessidade que sejam realizadas validações antes de inseri-los no banco de dados.