Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Mensagem de CEP inválido não aparecendo

A mensagem de CEP inválido não está aparecendo, apenas quando se volta e sai uma segunda vez do campo. Há alguma forma de resolver isso?

3 respostas

Oi Alex, coloca teu código dentro </> para que possamos dar uma olhada e te ajudar.

Fico no aguardo...

Olá!

Segue o código abaixo:

function recuperarCEP(input) {
    const cep = input.value.replace(/\D/g, '');
    const url = `https://viacep.com.br/ws/${cep}/json/`;
    const options = {
        method: 'GET',
        mode: 'cors',
        headers: {
            'content-type': 'application/json;charset=utf-8'
        }
    }

    if (!input.validity.patternMismatch && !input.validity.valueMissing) {
        fetch(url,options).then(
            response => response.json()
        ).then(
            data => {
                if(data.erro) {
                    input.setCustomValidity('Não foi possível buscar o CEP');
                    return
                }
                input.setCustomValidity('');
                preencheCamposComCEP(data);
                return
            }
        )
    }
}

function preencheCamposComCEP(data) {
    const logradouro = document.querySelector('[data-tipo="logradouro"]');
    const cidade = document.querySelector('[data-tipo="cidade"]');
    const estado = document.querySelector('[data-tipo="estado"]');

    logradouro.value = data.logradouro;
    cidade.value = data.localidade;
    estado.value = data.uf;
}

Agradeço o retorno =)

solução!

Olá Alex, tudo bem?

Me parece que seu código está tudo ok.

Essa mensagem de CEP inválido ela demora um tempo para aparecer, porque ele precisa fazer a requisição, buscar o erro nela e então mostrar que o CEP é inválido para o usuário.