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.
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.
6 comentários sobre “Como incluir uma máscara de CPF e CNPJ com validação (Javascript)”