Nenhum produto encontrado nessa seleção.
Validar CPF e CNPJ com JavaScript ou jQuery é a mesma coisa do que fizemos anteriormente com PHP (leia o artigo abaixo), portanto, não vou entrar em muitos detalhes sobre cálculos ou sobre o que nossas funções vão realizar.
Vou passar um arquivo JavaScript que fará o serviço por nós, logo em seguida explicarei como utilizar a função principal para validar ou formatar CPF ou CNPJ em um único campo.
Arquivo valida_cpf_cnpj.js
Este é o arquivo que irá conter todas as funções para a validação do CPF e do CNPJ, segue o código:
/*
verifica_cpf_cnpj
Verifica se é CPF ou CNPJ
@see http://www.todoespacoonline.com/w/
*/
function verifica_cpf_cnpj ( valor ) {
// Garante que o valor é uma string
valor = valor.toString();
// Remove caracteres inválidos do valor
valor = valor.replace(/[^0-9]/g, '');
// Verifica CPF
if ( valor.length === 11 ) {
return 'CPF';
}
// Verifica CNPJ
else if ( valor.length === 14 ) {
return 'CNPJ';
}
// Não retorna nada
else {
return false;
}
} // verifica_cpf_cnpj
/*
calc_digitos_posicoes
Multiplica dígitos vezes posições
@param string digitos Os digitos desejados
@param string posicoes A posição que vai iniciar a regressão
@param string soma_digitos A soma das multiplicações entre posições e dígitos
@return string Os dígitos enviados concatenados com o último dígito
*/
function calc_digitos_posicoes( digitos, posicoes = 10, soma_digitos = 0 ) {
// Garante que o valor é uma string
digitos = digitos.toString();
// Faz a soma dos dígitos com a posição
// Ex. para 10 posições:
// 0 2 5 4 6 2 8 8 4
// x10 x9 x8 x7 x6 x5 x4 x3 x2
// 0 + 18 + 40 + 28 + 36 + 10 + 32 + 24 + 8 = 196
for ( var i = 0; i < digitos.length; i++ ) {
// Preenche a soma com o dígito vezes a posição
soma_digitos = soma_digitos + ( digitos[i] * posicoes );
// Subtrai 1 da posição
posicoes--;
// Parte específica para CNPJ
// Ex.: 5-4-3-2-9-8-7-6-5-4-3-2
if ( posicoes < 2 ) {
// Retorno a posição para 9
posicoes = 9;
}
}
// Captura o resto da divisão entre soma_digitos dividido por 11
// Ex.: 196 % 11 = 9
soma_digitos = soma_digitos % 11;
// Verifica se soma_digitos é menor que 2
if ( soma_digitos < 2 ) {
// soma_digitos agora será zero
soma_digitos = 0;
} else {
// Se for maior que 2, o resultado é 11 menos soma_digitos
// Ex.: 11 - 9 = 2
// Nosso dígito procurado é 2
soma_digitos = 11 - soma_digitos;
}
// Concatena mais um dígito aos primeiro nove dígitos
// Ex.: 025462884 + 2 = 0254628842
var cpf = digitos + soma_digitos;
// Retorna
return cpf;
} // calc_digitos_posicoes
/*
Valida CPF
Valida se for CPF
@param string cpf O CPF com ou sem pontos e traço
@return bool True para CPF correto - False para CPF incorreto
*/
function valida_cpf( valor ) {
// Garante que o valor é uma string
valor = valor.toString();
// Remove caracteres inválidos do valor
valor = valor.replace(/[^0-9]/g, '');
// Captura os 9 primeiros dígitos do CPF
// Ex.: 02546288423 = 025462884
var digitos = valor.substr(0, 9);
// Faz o cálculo dos 9 primeiros dígitos do CPF para obter o primeiro dígito
var novo_cpf = calc_digitos_posicoes( digitos );
// Faz o cálculo dos 10 dígitos do CPF para obter o último dígito
var novo_cpf = calc_digitos_posicoes( novo_cpf, 11 );
// Verifica se o novo CPF gerado é idêntico ao CPF enviado
if ( novo_cpf === valor ) {
// CPF válido
return true;
} else {
// CPF inválido
return false;
}
} // valida_cpf
/*
valida_cnpj
Valida se for um CNPJ
@param string cnpj
@return bool true para CNPJ correto
*/
function valida_cnpj ( valor ) {
// Garante que o valor é uma string
valor = valor.toString();
// Remove caracteres inválidos do valor
valor = valor.replace(/[^0-9]/g, '');
// O valor original
var cnpj_original = valor;
// Captura os primeiros 12 números do CNPJ
var primeiros_numeros_cnpj = valor.substr( 0, 12 );
// Faz o primeiro cálculo
var primeiro_calculo = calc_digitos_posicoes( primeiros_numeros_cnpj, 5 );
// O segundo cálculo é a mesma coisa do primeiro, porém, começa na posição 6
var segundo_calculo = calc_digitos_posicoes( primeiro_calculo, 6 );
// Concatena o segundo dígito ao CNPJ
var cnpj = segundo_calculo;
// Verifica se o CNPJ gerado é idêntico ao enviado
if ( cnpj === cnpj_original ) {
return true;
}
// Retorna falso por padrão
return false;
} // valida_cnpj
/*
valida_cpf_cnpj
Valida o CPF ou CNPJ
@access public
@return bool true para válido, false para inválido
*/
function valida_cpf_cnpj ( valor ) {
// Verifica se é CPF ou CNPJ
var valida = verifica_cpf_cnpj( valor );
// Garante que o valor é uma string
valor = valor.toString();
// Remove caracteres inválidos do valor
valor = valor.replace(/[^0-9]/g, '');
// Valida CPF
if ( valida === 'CPF' ) {
// Retorna true para cpf válido
return valida_cpf( valor );
}
// Valida CNPJ
else if ( valida === 'CNPJ' ) {
// Retorna true para CNPJ válido
return valida_cnpj( valor );
}
// Não retorna nada
else {
return false;
}
} // valida_cpf_cnpj
/*
formata_cpf_cnpj
Formata um CPF ou CNPJ
@access public
@return string CPF ou CNPJ formatado
*/
function formata_cpf_cnpj( valor ) {
// O valor formatado
var formatado = false;
// Verifica se é CPF ou CNPJ
var valida = verifica_cpf_cnpj( valor );
// Garante que o valor é uma string
valor = valor.toString();
// Remove caracteres inválidos do valor
valor = valor.replace(/[^0-9]/g, '');
// Valida CPF
if ( valida === 'CPF' ) {
// Verifica se o CPF é válido
if ( valida_cpf( valor ) ) {
// Formata o CPF ###.###.###-##
formatado = valor.substr( 0, 3 ) + '.';
formatado += valor.substr( 3, 3 ) + '.';
formatado += valor.substr( 6, 3 ) + '-';
formatado += valor.substr( 9, 2 ) + '';
}
}
// Valida CNPJ
else if ( valida === 'CNPJ' ) {
// Verifica se o CNPJ é válido
if ( valida_cnpj( valor ) ) {
// Formata o CNPJ ##.###.###/####-##
formatado = valor.substr( 0, 2 ) + '.';
formatado += valor.substr( 2, 3 ) + '.';
formatado += valor.substr( 5, 3 ) + '/';
formatado += valor.substr( 8, 4 ) + '-';
formatado += valor.substr( 12, 14 ) + '';
}
}
// Retorna o valor
return formatado;
} // formata_cpf_cnpjInstruções de uso: Crie um arquivo chamado valida_cpf_cnpj.js e coloque-o dentro de uma pasta chamada “js” na raiz do seu site.
Adicionando o script ao HTML
Adicione o seguinte ao cabeçalho (head) do seu HTML:
<script src="js/valida_cpf_cnpj.js"></script>
Por exemplo:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutsup - Valida CPF e CNPJ</title>
<style>
.valido {
border: 1px solid green;
}
.invalido {
border: 1px solid red;
}
</style>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<!-- Funções para validação de CPF e CNPJ -->
<script src="js/valida_cpf_cnpj.js"></script>
<!-- EXEMPLOS -->
<!-- Pressionando teclas -->
<script src="js/exemplo_1.js"></script>
<!-- Após sair do campo -->
<script src="js/exemplo_2.js"></script>
<!-- Formatando o CPF ou CNPJ -->
<script src="js/exemplo_3.js"></script>
</head>
<body>
<input class="cpf_cnpj">
</body>
</html>Agora vamos ver alguns exemplos de validação.
Exemplos
Existe uma função chamada de valida_cpf_cnpj e outra chamada formata_cpf_cnpj, ambas validam CPF e CNPJ. A diferença entre elas é a seguinte:
- valida_cpf_cnpj – Valida e retorna “true” para CPF/CNPJ corretos; retorna “false” para CPF/CNPJ inválidos.
- formata_cpf_cnpj – Valida e retorna o CPF/CNPJ formatado (###.###.###-## ou ##.###.###/####-##); retorna “false” para CPF/CNPJ inválidos.
Para utilizar ambas as funções, você só precisa enviar o CPF ou CNPJ com qualquer formatação, por exemplo:
if ( formata_cpf_cnpj( '38.741.509/0001-68' ) ) {
alert('OK');
} else {
alert('CPF ou CNPJ inválido!');
}
// OU
if ( valida_cpf_cnpj( '085.647.291-30 ' ) ) {
alert('OK');
} else {
alert('CPF ou CNPJ inválido!');
}
Vamos ver alguns exemplos com jQuery.
Exemplo 1
Neste exemplo, vou validar o CPF/CNPJ enquanto a pessoa está digitando, veja:
// Testando a validação usando jQuery
$(function(){
// ## EXEMPLO 1
// Aciona a validação a cada tecla pressionada
var temporizador = false;
$('.cpf_cnpj').keypress(function(){
// O input que estamos utilizando
var input = $(this);
// Limpa o timeout antigo
if ( temporizador ) {
clearTimeout( temporizador );
}
// Cria um timeout novo de 500ms
temporizador = setTimeout(function(){
// Remove as classes de válido e inválido
input.removeClass('valido');
input.removeClass('invalido');
// O CPF ou CNPJ
var cpf_cnpj = input.val();
// Valida
var valida = valida_cpf_cnpj( cpf_cnpj );
// Testa a validação
if ( valida ) {
input.addClass('valido');
} else {
input.addClass('invalido');
}
}, 500);
});
});
Se o CPF/CNPJ estiver incorreto, incluo o classe “invalido”; se estiver correto, incluo a classe “valido”.
Exemplo 2
Neste exemplo vou validar o CPF/CNPJ quando o usuário sair do campo, ou seja, terminou de digitar e vai para outro input. Veja:
// Testando a validação usando jQuery
$(function(){
// ## EXEMPLO 2
// Aciona a validação ao sair do input
$('.cpf_cnpj').blur(function(){
// O CPF ou CNPJ
var cpf_cnpj = $(this).val();
// Testa a validação
if ( valida_cpf_cnpj( cpf_cnpj ) ) {
alert('OK');
} else {
alert('CPF ou CNPJ inválido!');
}
});
});
Exemplo 3
Neste último exemplo, vou validar o CPF/CNPJ e formatar o valor ao mesmo tempo:
// Testando a validação usando jQuery
$(function(){
// ## EXEMPLO 3
// Aciona a validação e formatação ao sair do input
$('.cpf_cnpj').blur(function(){
// O CPF ou CNPJ
var cpf_cnpj = $(this).val();
// Testa a validação e formata se estiver OK
if ( formata_cpf_cnpj( cpf_cnpj ) ) {
$(this).val( formata_cpf_cnpj( cpf_cnpj ) );
} else {
alert('CPF ou CNPJ inválido!');
}
});
});
Viu como é legal?
Download
Caso queira baixar todo o código acima (incluindo os exemplos), basta clicar no link abaixo:
- Download: valida_cpf_cnpj_com_js.zip
Extraia o conteúdo da pasta e abra o arquivo “index.html” em um navegador de internet, você poderá testar a validação em seu próprio computador.
Concluindo
Conforme descrevi, fui bem direto neste artigo, porém, acho que está claro como utilizar as funções que passei. Mesmo assim, não hesite em deixar sua opinião, dúvida ou melhoria no código.
Caso queira saber mais sobre os cálculos do algoritmo do CPF ou CNPJ, basta ler os artigos:
Até o próximo “Tutsup”.
