Formatando e Validando CPF em Formulários HTML

Introdução

Validar CPF em formulários é uma tarefa importante e ajuda a manter a precisão dos dados. Este artigo demonstra como criar um campo de entrada que valida e formata CPFs utilizando HTML e JavaScript.

Criando o formulário com o campo CPF

Para criar um campo de entrada de CPF no formulário, utilizaremos a tag <input> com o tipo "text":

<form id="cpfForm">
  <label for="cpf">CPF:</label>
  <input type="text" id="cpf" name="cpf">
  <input type="submit" value="Enviar">
</form>

Máscara de entrada para o CPF

Para garantir que o CPF tenha o formato correto 999.999.999-99, o script abaixo formata os dígitos enquanto os caracteres são digitados no campo:

document.getElementById('cpf').addEventListener('input', function(e) {
  var value = e.target.value;
  var cpfPattern = value.replace(/\D/g, '') // Remove qualquer coisa que não seja número
						.replace(/(\d{3})(\d)/, '$1.$2') // Adiciona ponto após o terceiro dígito
						.replace(/(\d{3})(\d)/, '$1.$2') // Adiciona ponto após o sexto dígito
						.replace(/(\d{3})(\d)/, '$1-$2') // Adiciona traço após o nono dígito
						.replace(/(-\d{2})\d+?$/, '$1'); // Impede entrada de mais de 11 dígitos
  e.target.value = cpfPattern;
});

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

Para validar o CPF antes de permitir o envio do formulário, utilizaremos uma função de validação a validade calculando os dígitos verificadores.

function validaCPF(cpf) {
  cpf = cpf.replace(/\D+/g, '');
  if (cpf.length !== 11) return false;

  let soma = 0;
  let resto;
  if (/^(\d)\1{10}$/.test(cpf)) return false; // Verifica sequências iguais

  for (let i = 1; i <= 9; i++) soma += parseInt(cpf.substring(i-1, i)) * (11 - i);
  resto = (soma * 10) % 11;
  if ((resto === 10) || (resto === 11)) resto = 0;
  if (resto !== parseInt(cpf.substring(9, 10))) return false;

  soma = 0;
  for (let i = 1; i <= 10; i++) soma += parseInt(cpf.substring(i-1, i)) * (12 - i);
  resto = (soma * 10) % 11;
  if ((resto === 10) || (resto === 11)) resto = 0;
  if (resto !== parseInt(cpf.substring(10, 11))) return false;

  return true;
}

document.getElementById('cpfForm').addEventListener('submit', function(e) {
  var cpf = document.getElementById('cpf').value;
  if (!validaCPF(cpf)) {
	e.preventDefault(); // Impede o envio do formulário
	alert('CPF inválido. Verifique o número digitado.');
	document.getElementById('cpf').focus(); // Foca no campo de CPF após o erro
  }
});

Para melhorar a experiência do usuário, o campo de CPF receberá automaticamente o foco caso o número inserido seja inválido.

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

Juntamos todos os conceitos apresentados até agora em um único código que formata e valida o número de CPF:

<form id="cpfForm">
	<label for="cpf">CPF:</label>
	<input type="text" id="cpf" name="cpf">
	<input type="submit" value="Enviar">
</form>

<script>
function validaCPF(cpf) {
	cpf = cpf.replace(/\D+/g, '');
	if (cpf.length !== 11) return false;

	let soma = 0;
	let resto;
	if (/^(\d)\1{10}$/.test(cpf)) return false;

	for (let i = 1; i <= 9; i++) soma += parseInt(cpf.substring(i-1, i)) * (11 - i);
	resto = (soma * 10) % 11;
	if ((resto === 10) || (resto === 11)) resto = 0;
	if (resto !== parseInt(cpf.substring(9, 10))) return false;

	soma = 0;
	for (let i = 1; i <= 10; i++) soma += parseInt(cpf.substring(i-1, i)) * (12 - i);
	resto = (soma * 10) % 11;
	if ((resto === 10) || (resto === 11)) resto = 0;
	if (resto !== parseInt(cpf.substring(10, 11))) return false;

	return true;
}

document.addEventListener('DOMContentLoaded', function() {
	document.getElementById('cpfForm').addEventListener('submit', function(e) {
		var cpf = document.getElementById('cpf').value;
		if (!validaCPF(cpf)) {
			e.preventDefault();
			alert('CPF inválido. Verifique o número digitado.');
			document.getElementById('cpf').focus();
		}
	});

	document.getElementById('cpf').addEventListener('input', function(e) {
		var value = e.target.value;
		var cpfPattern = value.replace(/\D/g, '')
							  .replace(/(\d{3})(\d)/, '$1.$2')
							  .replace(/(\d{3})(\d)/, '$1.$2')
							  .replace(/(\d{3})(\d)/, '$1-$2')
							  .replace(/(-\d{2})\d+?$/, '$1');
		e.target.value = cpfPattern;
	});
});
</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.