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

[Dúvida] Tipos de erro

import CPF from "./valida-cpf.js" import maiordeIdade from "./valida-idade.js"

const camposDoformulario= document.querySelectorAll("[required]")

camposDoformulario.forEach((campo) => { campo.addEventListener("blur", () => verificaCampo(campo))

campo.addEventListener("invalid", evento => evento.preventDefault())

})

const tiposDeErro = [
    'valueMissing',
    'typeMismatch',
    'patternMismatch',
    'tooShort',
    'customError'
]

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.',
    }

}]

function verificaCampo(campo) {
    let mensagem = ""
        if(campo.name == "cpf" && campo.value.length >= 11){
            CPF(campo)
        }
        if(campo.name == 'aniversario' && campo.value != '' ) {
            maiordeIdade(campo)
        }

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

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas
solução!

Olá Lucas, tudo bem? Pelo que entendi, você está com dúvidas sobre os tipos de erro em JavaScript para validar formulários, é isso mesmo?

Bom, o código que você postou mostra a definição de alguns tipos de erro, como "valueMissing", "typeMismatch", "patternMismatch", "tooShort" e "customError". Cada um desses erros é acionado quando o usuário preenche um campo de forma incorreta ou incompleta.

Além disso, o código também define algumas mensagens de erro personalizadas para cada campo do formulário. Por exemplo, se o campo de CPF estiver vazio, a mensagem de erro será "O campo de CPF não pode estar vazio."

Essas mensagens são exibidas ao usuário quando ele tenta enviar o formulário com algum campo preenchido de forma incorreta.

Espero ter ajudado a esclarecer suas dúvidas! Se precisar de mais ajuda, é só perguntar. Bons estudos!

Isso eu entendi bem. Estou tentando entender o porque nao imprime a mensagem do valueMissing. acabei marcando solução sem querer

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