[Bug] Formulário de Contato - Apliquei JavaScript para validação de dados e nada acontece. O que pode ser?

Oi Stephanny,

O problema ocorre porque o uso do this em funções arrow não se refere ao elemento esperado. 🤔

Em funções arrow, this captura o valor do contexto onde a função é definida, não onde é executada. Portanto, this.value acaba se referindo a window.value, que é undefined.

Soluções Proposta:

1. Usar Funções Tradicionais: Altere a função arrow para uma função tradicional, onde this se refere ao elemento que disparou o evento.

nameInput.addEventListener("input", function() {
    const resultado = validarName(this.value);
    nameError.textContent = resultado.mensagemErro;
    nameError.classList.toggle('mostrar-erro', !resultado.valido);
});

1. Referenciar Diretamente o Elemento: Use a variável de referência ao elemento diretamente.

nameInput.addEventListener("input", () => {
    const resultado = validarName(nameInput.value);
    nameError.textContent = resultado.mensagemErro;
    nameError.classList.toggle('mostrar-erro', !resultado.valido);
});

Faça isso, também, para o email e a menagens

Com essas correções, seu formulário deve começar a validar os dados corretamente.

Para saber mais: Manipulação de formulários com JavaScript

Continue praticando e explorando as possibilidades do JavaScript! 💪 😎

Caso este post o tenha ajudado, marque-o como solucionado ☑️. Bons Estudos! 🤓

Oi Luis.

Deu certo! Obrigada pela ajuda.