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

[Dúvida] Validação de formulário com JS, PFVR ME AJUDEM

Estava estudando JS na faculdade pois era a primeira cadeira. Consegui uma boa nota na prova final e muita coisa foi graças ao Alura com certeza. Mas estou com uma dificuldade boba, minha atividade de portfólio é validar um formulario que só tem o campo Email e a missão é fazer com que se o usuario não escreva nada na area de texto apareça uma mensagem de erro. Mas mesmo assim não estou conseguindo realizar essa atividade simples, já alterei o codigo diversas vezes, em alguns momentos a mensagem sempre aparecia, em outros a mensagem nem aparecia, usei o console.log pra saber se estava no elemento certo, fiz de tudo que sabia fazer. Meu ultimo recurso são fóruns por favor me ajudem, o codigo até então esta assim: index:

<!DOCTYPE html>
 <html>
  <head>
     <meta charset="utf-8">
     <link rel="stylesheet" href="style.css">
     <title>Contato</title>
  </head>
  <body>
     <form id="formulario">
        <h3 id="erro"></h3>
     <label for="email">Email *</label>
     <input type="email" id="email" class="campo" placeholder="exemplo@gmail.com">
     <button id="botao">Evniar</button>
   </form>
   <script src="JS/principal.js"></script>
 </body>
 </html>

e o js esta em uma pasta e esta assim:

const nome = document.getElementById("email")
const from = document.querySelector("form")
const erro = document.getElementById("erro")


function validarEmail() {
  if (nome.value.length == 0) {
    erro.textContent = "Você não preencheu o campo Email";
  } else {
    erro.textContent = "";
  }
}


from.addEventListener("submit", (event)=> {
  validarEmail();
   
if (nome.value.length == 0) {
    event.preventDefault(); 
  }
});

Por favor, não tenho mais recursos, já revi meu material didático da faculdade e mesmo assim não consigo progredir, alguém pode me dar um norte? ou até mesmo uma solução? Me frustei tanto que cheguei a cair em choro. Do modo que esta nem a mensagem de erro aparece... quando eu não uso o formulario inteiro e seleciono só o campo, a mensagem de erro fica o tempo todo na tela, mesmo se o usuário preencher. tambem já usei o evento de click, já fiz muitas coisas nesse codigo realmente era pra ser simples... mas n consigo o resultado

2 respostas
solução!

Gente eu consgui, usei evento de teclado e deu certo, vou deixar o post aq pra ajudar pessoas que possam precisar. o codigo ficou assim

const nome = document.getElementById("email")
const from = document.querySelector("form")
const erro = document.getElementById("erro")


nome.addEventListener("keyup", ()=>{
  console.log("escrevi")
  if (nome.value.length == 0) {
    erro.textContent = "Você não preencheu o campo Email";
  } else {
    erro.textContent = "";
  }
})


Oi Nelson, tudo bem?

Que bom que você conseguiu encontrar a solução! Obrigada por compartilhar com a gente a solução, com certeza vai ajudar outras pessoas.

Um abraço e bons estudos.