Formatando e Validando CNPJ em Formulários HTML

Introdução

Validar CNPJ em formulários é fundamental para assegurar a integridade e precisão dos dados. Este tutorial explica como implementar um campo de entrada que valida e formata CNPJs usando HTML e JavaScript, contribuindo para a melhoria da qualidade dos dados submetidos em seus formulários.

Criando o formulário com o campo CNPJ

Para adicionar um campo de entrada de CNPJ no formulário, usaremos a tag <input> com o tipo "text". Veja o exemplo abaixo para incorporar corretamente o campo CNPJ:

<form id="cnpjForm">
  <label for="cnpj">CNPJ:</label>
  <input type="text" id="cnpj" name="cnpj">
  <input type="submit" value="Enviar">
</form>

Máscara de entrada para o CNPJ

Para que o CNPJ seja inserido no formato correto 99.999.999/9999-99, aplique o seguinte script para formatar os dígitos à medida que são digitados:

document.getElementById('cnpj').addEventListener('input', function(e) {
	var value = e.target.value;
	var rawValue = value.replace(/\D/g, ''); // Remove tudo que não é número

	// Verifica se o CNPJ tem 15 dígitos e se o primeiro dígito é '0'
	if (rawValue.length === 15 && rawValue.startsWith('0')) {
		// Verifica se, ao remover o '0', o restante é um CNPJ válido
		var potentialCNPJ = rawValue.substring(1);
		// Atualiza rawValue para o CNPJ sem o '0' inicial
		if (validaCNPJ(potentialCNPJ)) rawValue = potentialCNPJ;
	}

	var cnpjPattern = rawValue
					.replace(/^(\d{2})(\d)/, '$1.$2') // Adiciona ponto após o segundo dígito
					.replace(/^(\d{2})\.(\d{3})(\d)/, '$1.$2.$3') // Adiciona ponto após o quinto dígito
					.replace(/\.(\d{3})(\d)/, '.$1/$2') // Adiciona barra após o oitavo dígito
					.replace(/(\d{4})(\d)/, '$1-$2') // Adiciona traço após o décimo segundo dígito
					.replace(/(-\d{2})\d+?$/, '$1'); // Impede a entrada de mais de 14 dígitos
	e.target.value = cnpjPattern;
});

Validação do CNPJ ao enviar o formulário

Para confirmar a validade do CNPJ antes de permitir o envio do formulário, empregaremos uma função de validação que verifica os dígitos verificadores do CNPJ.

function validaCNPJ(cnpj) {
	cnpj = cnpj.replace(/[^\d]+/g,'');
	if(cnpj == '' || cnpj.length != 14 || /^(\d)\1{13}$/.test(cnpj)) return false;

	// Valida DVs
	let tamanho = cnpj.length - 2
	let numeros = cnpj.substring(0,tamanho);
	let digitos = cnpj.substring(tamanho);
	let soma = 0;
	let pos = tamanho - 7;
	for (let i = tamanho; i >= 1; i--) {
		soma += numeros.charAt(tamanho - i) * pos--;
		if (pos < 2) pos = 9;
	}
	let 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 (let 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;
}

document.getElementById('cnpjForm').addEventListener('submit', function(e) {
  var cnpj = document.getElementById('cnpj').value;
  if (!validaCNPJ(cnpj)) {
    e.preventDefault(); // Impede o envio do formulário
    alert('CNPJ inválido. Por favor, verifique o número digitado.');
    document.getElementById('cnpj').focus(); // Foca no campo de CNPJ após detectar erro
  }
});

Esse procedimento melhora a experiência do usuário, redirecionando o foco para o campo de CNPJ caso o número inserido não seja válido.

Exemplo Completo de Formatação e Validação de CNPJ

A seguir, apresentamos um exemplo completo que combina a formatação e a validação do CNPJ em um único código. Este exemplo inclui o formulário com o campo de CNPJ, a máscara de entrada para garantir o formato correto e a validação do CNPJ ao enviar o formulário:

<form id="cnpjForm">
  <label for="cnpj">CNPJ:</label>
  <input type="text" id="cnpj" name="cnpj">
  <input type="submit" value="Enviar">
</form>

<script>
function validaCNPJ(cnpj) {
	cnpj = cnpj.replace(/[^\d]+/g,'');
	if(cnpj == '' || cnpj.length != 14 || /^(\d)\1{13}$/.test(cnpj)) return false;

	// Valida DVs
	let tamanho = cnpj.length - 2
	let numeros = cnpj.substring(0,tamanho);
	let digitos = cnpj.substring(tamanho);
	let soma = 0;
	let pos = tamanho - 7;
	for (let i = tamanho; i >= 1; i--) {
		soma += numeros.charAt(tamanho - i) * pos--;
		if (pos < 2) pos = 9;
	}
	let 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 (let 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;
}

document.getElementById('cnpjForm').addEventListener('submit', function(e) {
  var cnpj = document.getElementById('cnpj').value;
  if (!validaCNPJ(cnpj)) {
    e.preventDefault(); // Impede o envio do formulário
    alert('CNPJ inválido. Por favor, verifique o número digitado.');
    document.getElementById('cnpj').focus(); // Foca no campo de CNPJ após detectar erro
  }
});

document.getElementById('cnpj').addEventListener('input', function(e) {
	var value = e.target.value;
	var rawValue = value.replace(/\D/g, ''); // Remove tudo que não é número

	// Verifica se o CNPJ tem 15 dígitos e se o primeiro dígito é '0'
	if (rawValue.length === 15 && rawValue.startsWith('0')) {
		// Verifica se, ao remover o '0', o restante é um CNPJ válido
		var potentialCNPJ = rawValue.substring(1);
		// Atualiza rawValue para o CNPJ sem o '0' inicial
		if (validaCNPJ(potentialCNPJ)) rawValue = potentialCNPJ;
	}

	var cnpjPattern = rawValue
					.replace(/^(\d{2})(\d)/, '$1.$2') // Adiciona ponto após o segundo dígito
					.replace(/^(\d{2})\.(\d{3})(\d)/, '$1.$2.$3') // Adiciona ponto após o quinto dígito
					.replace(/\.(\d{3})(\d)/, '.$1/$2') // Adiciona barra após o oitavo dígito
					.replace(/(\d{4})(\d)/, '$1-$2') // Adiciona traço após o décimo segundo dígito
					.replace(/(-\d{2})\d+?$/, '$1'); // Impede a entrada de mais de 14 dígitos
	e.target.value = cnpjPattern;
});
</script>

Validação do Lado do Servidor

Lembre-se de que a validação JavaScript é apenas uma etapa do processo. Você precisa implementar as mesmas validações no script ou aplicativo que recebe os dados no servidor, garantindo a validade dos dados processados.