1
resposta

Não carregou logradouro, cidade e estado

Quando digito o CEP, as informações de logradouro, cidade e estado não foram carregadas automaticamente. Segue meu código. Observação: tirei o início do código para não atingir o número máximo de caracteres:


const validadores = {
    dataNascimento:input => validaDataNascimento(input),
    cpf:input => validaCPF(input),
    cep:input => recuperarCEP(input)

}

function mostraMensagemDeErro(tipoDeInput, input) {
    let mensagem = '';

    tiposDeErro.forEach(erro => {
        if(input.validity[erro]) {
            mensagem = mensagensDeErro[tipoDeInput][erro]
        }
    });

    return mensagem;

}


const dataNascimento = document.querySelector('#nascimento');

dataNascimento.addEventListener('blur', (evento) => {
    validaDataNascimento(evento.target)
});

function validaDataNascimento(input) {
    const dataRecebida = new Date(input.value);

    let mensagem = '';

    if (!maiorQue18(dataRecebida)) {
        mensagem = 'Você deve ser maior de 18 anos para se cadastrar';

    };

    input.setCustomValidity(mensagem);
}

function maiorQue18(data) {
    const dataAtual = new Date();
    const dataMais18 = new Date(data.getUTCFullYear() + 18, data.getUTCMonth(), data.getUTCDate());

    return dataMais18 <= dataAtual;
}

function validaCPF(input) {
    const cpfFormatado = input.value.replace(/\D/g, '');

    let mensagem = '';

    if(!checaCPFRepetido(cpfFormatado) || !checaEstruturaCPF(cpfFormatado)) {
        mensagem = 'O CPF digitado não é válido';
    }

    input.setCustomValidity(mensagem);

}

function checaCPFRepetido(cpf) {
    const valoresRepetidos = [
        '00000000000',
        '11111111111',
        '22222222222',
        '33333333333',
        '44444444444',
        '55555555555',
        '66666666666',
        '77777777777',
        '88888888888',
        '99999999999'
    ]

    let cpfValido = true;

    valoresRepetidos.forEach(valor => {
        if(valor == cpf) {
            cpfValido = false;
        }
    });

    return cpfValido;
}

function checaEstruturaCPF(cpf) {

    const multiplicador = 10;

    return checaDigitoVerificador(cpf, multiplicador);

}

function checaDigitoVerificador(cpf, multiplicador) {

    if (multiplicador >= 12) {

        return true;
    }

    let multiplicadorInicial = multiplicador;
    let soma = 0;
    const cpfSemDigitos = cpf.substr(0, multiplicador - 1).split('');
    const digitoVerificador = cpf.charAt(multiplicador - 1);
    for (let contador = 0; multiplicador > 1; multiplicador--) {
        soma = soma + cpfSemDigitos[contador * multiplicadorInicial];
        contador++;
    }

    if(digitoVerificador == confirmaDigito(soma)) {
        return checaDigitoVerificador(cpf, multiplicador + 1);
    }

    return false;
}

function confirmaDigito(soma) {

    return 11 - (soma % 11); 
}

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('CEP inválido');
                    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;

}
1 resposta

Olá Jainara, tudo bem?

Acho que identifiquei onde está o problema que está causando o seu erro.

Quando você faz a requisição fetch ela recebe 1º a URL e depois um objeto com opções.

Observe que a URL é personalizada de acordo com o CEP que você for passar pra ela. Ou seja, ele vai fazer uma requisição diferente de acordo com o CEP digitado pelo usuário.

Então nessa última função recuperarCEP você pega o CEP e limpa todos os caracteres que não são dígitos:

const cep = input.value.replace(/\D/g, '');

Depois você pega esse CEP limpo e cria a URL:

const url = 'https://viacep.com.br/ws/${cep}/json/';

Aqui está o erro. Observe que você faz uma requisição para https://viacep.com.br/ws/${cep}/json/ quando na verdade você deve fazer uma requisição para um CEP digitado.

Para isso você precisa trocar as aspas simples por crases.

const url = `https://viacep.com.br/ws/${cep}/json`;

Assim ele vai pegar a URL que o usuário digitou, limpar a URL e fazer uma concatenação para fazer a requisição: https://viacep.com.br/ws/12345123/json

Dessa forma vai funcionar.

Espero ter ajudado. Forte abraço!