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

[Bug] Cannot read properties of undefined (reading 'valueMissing')

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

Olá! Tudo bem?

Esse erro geralmente ocorre quando você tenta acessar uma propriedade de um objeto que ainda não foi definido.

Analisando seu código, você está tentando acessar as mensagens de erro antes mesmo de definir a variável tiposErro. No JavaScript, a ordem de declaração importa. Você está tentando usar a variável tiposErro na função verificaCampo(campo) antes de realmente declará-la.

Tente mover a declaração da variável tiposErro e mensagensErro para o início do seu código, antes da função verificaCampo(campo).

Seu código ficaria assim:

import ehCPF from './valida-cpf.js'
import ehMaiorDeIdade from './valida-idade.js'

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

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 = {
    // seu objeto de mensagens
}

function verificaCampo(campo) {
    // seu código
}

Outro ponto que notei é que na condição else if (campo.name = 'aniversario' && campo.value != ''), você está usando o operador de atribuição = em vez do operador de comparação == ou ===. Isso pode estar causando um comportamento inesperado. Corrija isso para else if (campo.name == 'aniversario' && campo.value != '').

Era isso. Espero ter ajudado!

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓
solução!

Fiz as alterações sugeridas, mas continua dando erro. Mas agora é esse erro:

Uncaught TypeError: mensagensErro[campo.name] is undefined
    verificaCampo http://127.0.0.1:5500/js/script.js:59
    verificaCampo http://127.0.0.1:5500/js/script.js:57
    <anonymous> http://127.0.0.1:5500/js/script.js:66
    EventListener.handleEvent* http://127.0.0.1:5500/js/script.js:66
    <anonymous> http://127.0.0.1:5500/js/script.js:65

Comentei o bloco forEach e coloquei um console.log(campo.name) e o retorno foi false, mesmo que no html, o name esteja correto.

Então, troquei mensagensErro[campo.name][erro] por mensagensErro[campo.id][erro] e deu certo.