Entrar Ainda não tem acesso?
3
respostas

Incluindo uma classe na mensagem de erro

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Validação de Formulários e atividade Exibindo mensagens de erro

por Valmyr Tavares Malta de Lima
| 94.9k xp | 59 posts
dono

Eu refiz o curso algumas vezes para compreender ao máximo cada passo. Nessa parte da validação eu tentei um caminho diferente que no meu ver parece mais simples e direto. No meu form.js eu criei uma função valida paciente que está na linha 27, que recebe o paciente, com dois ifs. Depois essa função devolve esse paciente alterado e inclui essa função na linha 11 do meu código alterando o fluxo. do código. Achei essa solução muito mais direta e fácil do que a que é apresentada na aula. A questão é que gostaria de que a mensagem de erro viesse em vermelho. Por isso acrescentei uma classe no meu style.css e usei o classList.add("mensatem-erro") para que a mensagem viesse vermelha, caso ela fosse chamada. Só que quando provoco a mensagem eu tenho uma mensagem de erro no Browser dizendo que Cannot read property 'add' of undefined . Eu já tentei transformar o paciente.peso em uma variável qualquer mas o problema continua.Como faço para acrescentar a classe na mensagem de erro? O codigo está no meu git https://github.com/ValmyrTavares/AdicionandoClassesJacascript Agradeço desde já a atenção Valmyr

3 respostas
por Instrutor
| 1131.4k xp | 1471 posts
Instrutor

Valmyr, bom dia!

Isso está ocorrendo porquê o paciente.peso não é um node(Link sobre o que um node), ele é um objeto que você criou em outra função, sendo assim ele não tem o atributo de classList. Você pode criar um elemento com o document.createElement() e adicionar a classe de erro nesse elemento criado.

Espero ter ajudado e bons estudos! Qualquer dúvida manda aqui!

por Valmyr Tavares Malta de Lima
| 94.9k xp | 59 posts
dono

Oi Felipe Obrigado pela ajuda. Vc poderia escrever essas valiosas linhazinhas com o document.createElement() para que eu entenda perfeitamente o que quer dizer? Eu tenho ideias vagas do que seria, mas se me mostrasse me pouparia tempo. Pode ser? Agradeço desde já

por Instrutor
| 1131.4k xp | 1471 posts
Instrutor

Valmyr estamos aqui para ajudar!

Bom primeiro nos criamos o elemento e atribuimos a uma variável 

var mensagemErro = document.createElement('div');

Depois nós adicionamos um texto a esse elemento

    mensagemErro.textContent ="Dados inválidos";

Após o texto ser adicionado nós inserimos a classe de erro

    mensagemErro.classList.add("mensagem-erro");

E por último nós adicionamos esse elemento assim que o form é aberto, para que possamos visualizar a div

    form.prepend(mensagemErro);

Ficando o código final assim:

var mensagemErro = document.createElement('div');
    mensagemErro.textContent ="Dados inválidos";
    mensagemErro.classList.add("mensagem-erro");
    form.prepend(mensagemErro);

Daí você pode remover aquela linha onde você adicionava a classe ao paciente e troca por esse código

Espero ter ajudado e bons estudos!