flysmog.pages.dev

Como validar CEP em tempo real com JavaScript em formulário?

Validar CEP em tempo real é essencial para garantir que os dados inseridos em um formulário sejam corretos, evitando erros de digitação e melhorando a experiência do usuário. Este método é eficaz e simples, utilizando APIs gratuitas para buscar informações completas do endereço automaticamente.

Pré-requisitos

Passo 1: Estruturar o formulário HTML

Crie um formulário simples com um campo para o CEP e outros campos para o endereço. Utilize o atributo onblur para disparar a validação quando o campo perder o foco.

<form id="formulario">
  <label for="cep">CEP:</label>
  <input type="text" id="cep" name="cep" onblur="validarCEP()" maxlength="9" placeholder="00000-000">
  <label for="logradouro">Logradouro:</label>
  <input type="text" id="logradouro" name="logradouro" readonly>
  <label for="bairro">Bairro:</label>
  <input type="text" id="bairro" name="bairro" readonly>
  <label for="cidade">Cidade:</label>
  <input type="text" id="cidade" name="cidade" readonly>
  <label for="estado">Estado:</label>
  <input type="text" id="estado" name="estado" readonly>
</form>

Passo 2: Implementar a função de validação em JavaScript

Crie uma função que valide o formato do CEP e faça uma requisição à API ViaCEP para buscar os dados do endereço. Utilize XMLHttpRequest ou fetch para a requisição.

function validarCEP() {
  let cep = document.getElementById('cep').value.replace(/\D/g, '');
  if (cep !== "" && /^[0-9]{8}$/.test(cep)) {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://viacep.com.br/ws/' + cep + '/json/');
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          let dados = JSON.parse(xhr.responseText);
          if (!dados.erro) {
            document.getElementById('logradouro').value = dados.logradouro;
            document.getElementById('bairro').value = dados.bairro;
            document.getElementById('cidade').value = dados.localidade;
            document.getElementById('estado').value = dados.uf;
          } else {
            alert('CEP não encontrado.');
          }
        } else {
          alert('Erro ao buscar dados do CEP.');
        }
      }
    };
    xhr.send();
  } else {
    alert('CEP inválido. Por favor, insira um CEP válido.');
  }
}

Passo 3: Adicionar máscara ao campo CEP

Para melhorar a experiência do usuário, adicione uma máscara ao campo CEP para formatar automaticamente o número à medida que o usuário digita.

function mascaraCEP() {
  let cep = document.getElementById('cep');
  cep.value = cep.value.replace(/\D/g, '').replace(/(\d{5})(\d)/, '$1-$2');
}

Adicione o evento onkeyup ao campo CEP no HTML: onkeyup="mascaraCEP()".

Exemplo Prático

CEP Logradouro Bairro Cidade Estado
01001-000 Praça da Sé Centro São Paulo SP
22010-010 Praia de Botafogo Botafogo Rio de Janeiro RJ

Conclusão

Com este método, você pode validar CEP em tempo real com JavaScript em formulário de forma eficiente e confiável. A integração com a API ViaCEP simplifica o processo, garantindo que os dados do endereço sejam precisos e atualizados, melhorando significativamente a qualidade dos dados coletados.