Classe "erro-validacao" não é removida

Boa tarde, Renan! Como vai?

Em qual arquivo é feita a validação em questão? Vc não informou esse detalhe.

Olá Gabriel, o arquivo de validação é feito em "validar.js", também há o "mensagensErro.js" onde contém as mensagens de erro e o "app.js" que controla os inputs na página de forma genérica. Porém não sei ao certo onde está o problema, visto que os arquivos disponibilizados no final de cada bloco de aula não correspondem com o ensinado até o final da mesma.

Percebi que a "div" com a classe "erro-validacao" é criada sempre que houver um erro no campo. Sempre que der o foco no campo e em seguida retirar o foco, o erro é mostrado em sequência abaixo do campo e o mesmo não é removido após inserir a informação válida.

Olá Renan, tudo bem?

Vamos lá, existem alguns erros de digitação que ocasionou esse comportamente em seu código:

• Vamos primeiro no principal no arquivo: validar.js

Acredito que esse é o mais chato que é não tirar a div, isso ocorreu porque você não estava selecionando o elemento correto, então ele sempre criava uma nova:

Você colocou:

const elementoErroExiste = elementoPai.querySelector(`${classeElementoErro}`);

Quando na verdade precisamos passar também o tipo do seletor, em nosso caso era uma div então se torna necessário utilizar o ., por conta disso a função nunca encontrava

A maneira correta é:

const elementoErroExiste = elementoPai.querySelector(`.${classeElementoErro}`);

• O segundo erro está relacionado com a validação no arquivo mensagensErro.js

Nesse caso precisamos trabalhar com o nome idêntico ao utilizado pelo validity caso contrário a validação não irá funcionar corretamente, o seu código só funcionava com o valueMissing, ainda que o email estivesse incorreto, para corrigir isso precisamos trocar onde você digitou typeMisMatch para typeMismatch

O seu código:

const tiposDeErro = ['valueMissing', 'typeMisMatch', 'tooShort', 'rangeUnderflow', 'customError'];

    const mensagensDeErro = {

        email: {
            valueMissing: 'O email é necessário',
            typeMisMatch: 'Este email não é válido'
        },

Maneira Correta:

const tiposDeErro = ['valueMissing', 'typeMismatch', 'tooShort', 'rangeUnderflow', 'customError'];

    const mensagensDeErro = {

        email: {
            valueMissing: 'O email é necessário',
            typeMismatch: 'Este email não é válido'
        },

Após corrigir isso o seu projeto deve estar funcionando corretamente :)

Abraços e Bons Estudos!

Olá Geovani, agradeço muito a sua ajuda.

Com as correções que você mencionou, meu código funcionou corretamente.

Mais uma vez agradeço pelo seu tempo dispendido.