Fiz como a professora fez (conforme código abaixo), mas as mensagens não aparecem. Ao contrário, o console retorna o seguinte erro:
Uncaught TypeError: Cannot read properties of undefined (reading 'valueMissing')
at script.js:15:55
at Array.forEach (<anonymous>)
at verificaCampo (script.js:13:15)
at HTMLInputElement.<anonymous> (script.js:22:42)
script.js
import ehCPF from './valida-cpf.js'
import ehMaiorDeIdade from './valida-idade.js'
const camposDoFormulario = document.querySelectorAll("[required]")
function verificaCampo(campo) {
if (campo.name == 'cpf' && campo.value.length >= 11) {
ehCPF(campo)
} else if (campo.name = 'aniversario' && campo.value != '') {
ehMaiorDeIdade(campo)
}
tiposErro.forEach(erro => {
if (campo.validity[erro]) {
const mensagem = mensagensErro[campo.name][erro]
console.log(`Erro no campo ${campo}: ${mensagem}`)
}
})
}
camposDoFormulario.forEach((campo) => {
campo.addEventListener('blur', () => verificaCampo(campo))
campo.addEventListener('invalid', evento => evento.preventDefault())
})
const tiposErro = [
'valueMissing', // sem valor
'typeMismatch', // erro de tipo
'patternMismatch', // erro de padrão
'tooShort', // erro de tamanho da string
'customError' // erro inominado
]
const mensagensErro = {
nome: {
valueMissing: "O campo de nome não pode estar vazio.",
patternMismatch: "Por favor, preencha um nome válido.",
tooShort: "Nome muito pequeno. Você realmente forneceu seu nome completo?"
},
email: {
valueMissing: "O campo de e-mail não pode estar vazio.",
typeMismatch: "Por favor, preencha um email válido.",
tooShort: "Texto muito pequeno. Você tem certeza que seu e-mail está correto?"
},
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 abrir uma conta.'
},
termos: {
valueMissing: 'Você deve aceitar nossos termos antes de continuar. ',
}
}