1
resposta

[Bug] Erro no valueMissing

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeNão está aparencendo as mensagens cutomizadas

import ehUmCPF from "./valida-cpf.js";
import ehMaiorDeIdade from "./valida-idade.js";
const camposFormulario = document.querySelectorAll("[required]");
camposFormulario.forEach((campo) => {
    campo.addEventListener("blur", () => verificaCampo(campo));
    campo.addEventListener("invalid", event => event.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 = "";

    campo.setCustomValidity(''); 

    if (campo.name == "cpf" && campo.value.length >= 11) {
        ehUmCPF(campo);
    }
    if (campo.name == "aniversario" && campo.value != "" ) {
        ehMaiorDeIdade(campo);
    }
    
    tiposDeErro.forEach(erro => {
        if (campo.valitidy[erro]) {
            mensagem = mensagens[campo.name][erro];
            console.log(mensagem);
        }
    })
    const mensagemErro = campo.parentNode.querySelector('.mensagem-erro');

    const validadorDeInput = campo.checkValidity(); 

     if (!validadorDeInput) {
        mensagemErro.textContent = mensagem;
     } else {
        mensagemErro.textContent = "";
     }
}
1 resposta

Oii Maisa, tudo certinho?

O erro que você está enfrentando está relacionado a esta parte do código:

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

Na segunda linha, está um errinho de sintaxe. A propriedade correta a ser usada é campo.validity. No seu código, as letras t e d estão trocadas.

Espero que dê tudo certo!

Abração.

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