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

[Dúvida] Acontece nada ao clicar no botão Avançar

Quando eu aperto o botão Avançar acontece nada.

Na verdade, apenas salvou os dados no localStorage corretamente. Então eu limpei o localStorage, e testei novamente. Nem isso acontece mais.

arquivo script.js

import ehUmCPF from "./valida-cpf.js";
import ehMaiorDeIdade from "./valida-idade.js";

const camposDoFormulario = document.querySelectorAll("[required]");
const formulario = document.querySelector("[data-formulario]");

// Armazenar no localStorage
formulario.addEventListener("submit", (e) => {
    e.preventDefault();

    let listaRespostas = {
        "nome": e.target.elements["nome"].value,
        "email": e.target.elements["email"].value,
        "rg": e.target.elements["rg"].value,
        "cpf": e.target.elements["cpf"].value,
        "aniversario": e.target.elements["aniversario"].value,
    }

    localStorage.setItem("cadastro", JSON.stringify(listaRespostas));

    window.location.href = "./abrir-conta-form-2.html";
})

// eventos dos campos para validação
camposDoFormulario.forEach(campo => {
    campo.addEventListener("blur", () => verificaCampo(campo));
    campo.addEventListener("invalid", evento => evento.preventDefault());
});

// lista com erros
const tiposDeErro = [
    'valueMissing',
    'typeMismatch',
    'patterMismatch',
    'tooShort',
    'customError'
]

// mensagens customizadas para cada tipo de erro, em cada campo
const mensagens = {
    nome: {
        valueMissing: "O campo de nome não pode estar vazio.",
        patternMismatch: "Por favor, preencha um nome válido.",
        tooShort: "Por favor, preencha um nome válido."
    },
    email: {
        valueMissing: "O campo de e-mail não pode estar vazio.",
        typeMismatch: "Por favor, preencha um email válido.",
        tooShort: "Por favor, preencha um e-mail válido."
    },
    rg: {
        valueMissing: "O campo de RG não pode estar vazio.",
        patternMismatch: "Por favor, preencha um RG válido.",
        tooShort: "O campo de RG não tem caractéres suficientes."
    },
    cpf: {
        valueMissing: 'O campo de CPF não pode estar vazio.',
        patternMismatch: "Por favor, preencha um CPF válido.",
        customError: "O CPF digitado não existe.",
        tooShort: "O campo de CPF não tem caractéres suficientes."
    },
    aniversario: {
        valueMissing: 'O campo de data de nascimento não pode estar vazio.',
        customError: 'Você deve ser maior que 18 anos para se cadastrar.'
    },
    termos: {
        valueMissing: 'Você deve aceitar nossos termos antes de continuar.',
    }
}

// Verificação dos campos
function verificaCampo(campo) {
    let mensagem = ""; // clear 1
    campo.setCustomValidity(""); // clear 2

    if (campo.name == "cpf" && campo.value.length >= 11) {
        ehUmCPF(campo);
    };
    if (campo.name == "aniversario" && campo.value != "") {
        ehMaiorDeIdade(campo); 
    };
    // console.log(campo.validity)

    // Capturar mensagem de erro
    tiposDeErro.forEach(erro => {
        if (campo.validity[erro]) {
            mensagem = mensagens[campo.name][erro]
            console.log(mensagem);
        };
    });

    // Imprime na tela o erro capturado
    const mensagemErro = campo.parentNode.querySelector(".mensagem-erro");
    const validadorDeImput = campo.checkValidity();

    if(!validadorDeImput) {
        mensagemErro.textContent = mensagem;
    } else {
        mensagemErro.textContent = "";
    };
};
2 respostas
solução!

Depois de horas tentando aqui eu descobri que o erro estava no pattern, no html kkk

Mas por algum motivo não estava aparecendo a mensagem de erro informando que o formato do CPF estava errado.

Agora está tudo ok!

Oi Roberto, tudo bem?

Que bom que conseguiu encontrar o erro. E muito obrigada por compartilhar com a gente, com certeza vai ajudar outras pessoas.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software