Como integrar validação de CPF em formulário HTML sem backend?

Validar um CPF diretamente no navegador do usuário é uma maneira eficiente e segura de garantir que os dados inseridos estejam corretos, sem a necessidade de processamento no servidor. Este método utiliza JavaScript para verificar a autenticidade do CPF em tempo real, proporcionando uma experiência mais rápida e reduzindo a carga no backend.

Pré-requisitos

• Editor de texto para criar o arquivo HTML.
• Navegador web moderno para testar o formulário.

Passo 1: Estrutura do Formulário HTML

Crie um formulário básico com um campo para o CPF e um botão de envio. O campo de CPF terá um evento de validação ao perder o foco (onblur).

<form id="cpfForm">
  <label for="cpf">CPF:</label>
  <input type="text" id="cpf" name="cpf" onblur="validarCPF(this.value)">
  <span id="cpfMessage"></span>
  <button type="submit">Enviar</button>
</form>

Passo 2: Função de Validação do CPF

A função validarCPF() verifica se o CPF digitado é válido, utilizando o algoritmo padrão de validação de CPF. Esta função é chamada quando o campo de CPF perde o foco.

function validarCPF(cpf) {
  cpf = cpf.replace(/[^\d]/g, '');
  if (cpf.length !== 11) {
    document.getElementById('cpfMessage').innerHTML = 'CPF inválido';
    return false;
  }
  let soma = 0;
  let resto;
  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))) {
    document.getElementById('cpfMessage').innerHTML = 'CPF inválido';
    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))) {
    document.getElementById('cpfMessage').innerHTML = 'CPF inválido';
    return false;
  }
  document.getElementById('cpfMessage').innerHTML = 'CPF válido';
  return true;
}

Passo 3: Integração da Validação no Formulário

Para garantir que o CPF seja validado antes do envio do formulário, adicione um evento de validação no botão de envio.

document.getElementById('cpfForm').addEventListener('submit', function(event) {
  let cpf = document.getElementById('cpf').value;
  if (!validarCPF(cpf)) {
    event.preventDefault();
    alert('Por favor, insira um CPF válido.');
  }
});

Exemplo Prático

Conclusão

Com este método, você pode integrar uma validação de CPF eficiente e segura diretamente no seu formulário HTML, sem a necessidade de um backend. Isso não só melhora a experiência do usuário, mas também reduz a carga de processamento no servidor, tornando seu site mais rápido e confiável.