1
resposta

Dúvida setCustomValidity

Olá. Está tudo dando certo aqui em termos de busca do cep pela API. Porém quando coloco um numero aleatório (no formato correto), ele demora para dar a resposta. Muito mais do que demora pra fazer a solicitação. O "erro: true" aparece instantaneamente no console, porém a resposta aparece apenas se eu saio do campo, volto ao campo, e saio dele novamente.

Ps.: Essa mesma dúvida já foi postada no Fórum e não obteve resposta, copiei e colei para fazer esse post, vamos ver se por algum milagre alguém responde...

Segue o código:

function recoverZipCode(input) {    
    const cep = input.value.replace(/\D/g, '')
    const url = `https://viacep.com.br/ws/${cep}/json/`
    const options = {
        // Método da requisição que faremos
        method:'GET',
        /* Modo da requisição
        OBS.: Como estamos fazendo requisição entre APIs, é importante deixar o mode com cors*/
        mode: 'cors',
        // O que esperamos de resposta da API
        // Com o charset=utf-8 garantimos que o retorno da API estará no padrão utf-8
        headers: {
            'content-type':'application/json;charset=utf-8',
        }
    }

    //Garantindo que o input seja válido antes de fazer a requisição
    if(!input.validity.patternMismatch && !input.validity.valueMissing) {
        fetch(url, options).then(
            //Transformando o retorno em Json
            response => response.json()
        ).then(
            date => {
                // Tratando o erro
                console.log(date);
                if(date.erro) {
                     input.setCustomValidity('Não foi possível buscar o CEP. Verifique os números digitados.')
                    // O return interrompe o fetch, após a mensagem de erro.
                    return              
                }

                input.setCustomValidity('')  

            }
        )
    }
}
1 resposta

Oii, Dev! Tudo bem?

Agradeço por aguardar o nosso retorno.

Obrigada por compartilhar sua dúvida na comunidade do fórum! Uma possível solução para esse problema é utilizar a função setTimeout() para adicionar um pequeno atraso na validação do campo, permitindo que a resposta da API seja processada antes de exibir a mensagem de erro.

Você pode fazer isso adicionando o seguinte código dentro da função recoverZipCode() logo após a verificação de erro:

if(date.erro) {
    setTimeout(() => {
        input.setCustomValidity('Não foi possível buscar o CEP. Verifique os números digitados.')
    }, 100)
    return              
}

Nesse exemplo, estamos adicionando um atraso de 100 milissegundos antes de exibir a mensagem de erro. Você pode ajustar esse valor conforme a sua necessidade.

Espero ter ajudado, qualquer dúvida, estarei à disposição.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!