Consulta de CEP Automática: Como Implementar e Utilizar

O código apresentado permite a consulta automática de endereços a partir de um CEP, utilizando a API pública do ViaCEP. Essa funcionalidade é extremamente útil em formulários de cadastro, e-commerce e sistemas que necessitam de dados de endereço de forma rápida e eficiente.

Neste artigo, vamos explicar:
✔ Para que serve o código
✔ Como ele funciona
✔ Como implementá-lo em seu projeto

---

1. Para que Serve o Código?

O script tem como principal objetivo automatizar o preenchimento de campos de endereço (rua, bairro, cidade e estado) assim que o usuário digita um CEP válido.

Principais benefícios:

✅ Melhora a experiência do usuário (não precisa digitar manualmente o endereço)
✅ Reduz erros (os dados vêm diretamente de uma fonte confiável)
✅ Economiza tempo (preenchimento instantâneo)

É ideal para:

• Lojas virtuais
• Sistemas de cadastro
• Aplicações que exigem dados de endereço

---

2. Como o Código Funciona?

Fluxo de Execução:

1. O usuário digita o CEP e sai do campo (evento blur).
2. O script remove caracteres não numéricos e valida o formato (8 dígitos).
3. Se o CEP for válido, ele faz uma requisição à API ViaCEP (https://viacep.com.br/ws/${cep}/json/).
4. Se o CEP existir, os campos de endereço são preenchidos automaticamente.
5. Se o CEP for inválido ou não existir, os campos são limpos e uma mensagem de erro é exibida.

Tecnologias Utilizadas:

🔹 jQuery (para simplificar manipulação do DOM e requisições AJAX)
🔹 API ViaCEP (serviço gratuito de consulta de CEP)

---

3. Como Usar o Código?

Passo 1: Estrutura HTML Básica

O formulário deve conter os campos com os IDs corretos para que o script funcione:

<input type="text" id="cep" placeholder="Digite o CEP">
<input type="text" id="rua" readonly>
<input type="text" id="bairro" readonly>
<input type="text" id="cidade" readonly>
<input type="text" id="uf" readonly>

Passo 2: Inclua o jQuery

Adicione a biblioteca jQuery antes do script:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Passo 3: Configure os IDs (se necessário)

Se seus campos tiverem IDs diferentes, atualize a constante selectors:

const selectors = {
    rua: '#endereco',  // Exemplo: se o ID do campo for "endereco"
    bairro: '#bairro',
    cidade: '#municipio', // Exemplo: se o ID for "municipio"
    uf: '#estado',
    cep: '#cep'
};

Passo 4: Teste o Funcionamento

• Digite um CEP válido (ex: 01001000) e clique fora do campo.
• Os campos devem ser preenchidos automaticamente.

---

4. Personalizações Possíveis

Adicionar Máscara ao CEP

Para melhorar a usabilidade, você pode incluir uma máscara no campo CEP:

<input type="text" id="cep" placeholder="00000-000" onkeypress="mascaraCEP(this)">
function mascaraCEP(cep) {
    cep.value = cep.value.replace(/\D/g, '')
                         .replace(/(\d{5})(\d)/, '$1-$2')
                         .substring(0, 9);
}

Adicionar Validação Extra

Verifique se o CEP existe antes de enviar o formulário:

$jq('#meuForm').submit(function(e) {
    if ($jq(selectors.rua).val() === '') {
        alert('Por favor, insira um CEP válido.');
        e.preventDefault();
    }
});

Código completo

<script type="text/javascript">
/* SETUP DOS IDS DO FORM
 * 
 * Insira os ID's CSS de acordo com os campos do seu formulário.
 */	
const selectors = {
    rua: '#rua',
    bairro: '#bairro',
    cidade: '#cidade',
    uf: '#uf',
    cep: '#cep'
};

// Inicializa jQuery no modo noConflict
const $jq = jQuery.noConflict();

$jq(document).ready(function() {
    // Função para limpar os campos do formulário
    function limpaFormulario() {
        $jq(selectors.rua).val('');
        $jq(selectors.bairro).val('');
        $jq(selectors.cidade).val('');
        $jq(selectors.uf).val('');
    }

    // Função para preencher os campos com os dados do CEP
    function preencheCamposEndereco(dados) {
        $jq(selectors.rua).val(dados.logradouro);
        $jq(selectors.bairro).val(dados.bairro);
        $jq(selectors.cidade).val(dados.localidade);
        $jq(selectors.uf).val(dados.uf);
    }

    // Evento que dispara ao perder o foco no campo CEP
    $jq(selectors.cep).blur(function() {
        const cep = $jq(this).val().replace(/\D/g, '');

        if (cep) {
            // Valida o formato do CEP
            const validacep = /^[0-9]{8}$/;
            if (validacep.test(cep)) {
                // Preenche os campos com "carregando" enquanto consulta
                Object.values(selectors).forEach(selector => {
                    $jq(selector).val('...carregando');
                });

                // Consulta o webservice viacep.com.br/
                $jq.getJSON(`https://viacep.com.br/ws/${cep}/json/?callback=?`, function(dados) {
                    if (!('erro' in dados)) {
                        preencheCamposEndereco(dados);
                    } else {
                        limpaFormulario();
                        alert('CEP não encontrado.');
                    }
                });
            } else {
                limpaFormulario();
                alert('Formato de CEP inválido.');
            }
        } else {
            limpaFormulario();
        }
    });
});
</script>

5. Conclusão

Este script é uma solução simples e eficiente para automatizar o preenchimento de endereços a partir do CEP, melhorando a experiência do usuário e reduzindo erros em formulários.

Link para teste: Clique aqui

Próximos Passos:

• Implemente em seu site ou sistema
• Personalize conforme sua necessidade
• Teste com diferentes CEPs para garantir o funcionamento

Se tiver dúvidas, consulte a documentação do ViaCEP.

🚀 Agora é só implementar e facilitar a vida dos seus usuários!