Post ensinando a como incluir uma máscara de CPF e CNPJ com validação no mesmo campo, utilizando apenas Javascript.
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.
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.
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 = "";
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.
Segurança: Atualizações frequentes geralmente incluem patches de segurança para corrigir vulnerabilidades identificadas. Ao manter o Magento atualizado, você reduz significativamente…
Como adicionar uma mensagem de Alerta ou Aviso do Admin do Magento 2 Injete o Magento\Framework\Message\ManagerInterface no construtor da sua…
Para exibir as mensagens adicionadas na classe Magento\Framework\Message\ManagerInterface em um arquivo .phtml, você pode usar o seguinte código: <?php $objectManager…
Para criar um script no Magento 2 que exporte as categorias para um arquivo XML com o nome da categoria,…
Para definir um vídeo MP4 como plano de fundo em um <div> usando HTML e CSS, você pode seguir estas…
Como desativar o "lastname" no Magento 2 e Adobe Commerce Desativando a obrigatoriedade do campo Execute a SQL abaixo diretamente…
Ver comentários
incrivel.. sensacional..
amigo, mas na tela do html, no campo do imput, preciso colocar algo no onblur?
Perfeito! Obrigado, Roger. Ajudou demais.
Show, fico feliz em ter ajudado!
Muito bom, me ajudou bastante obrigado!
Oi Pedro, que bom! conte conosco! Abraço!