Qual a melhor maneira de validar um formulário?

Boa noite, Rene! Como vai?

Se vc não fizer o event.preventDefault() os dados serão enviados ao endereço definido no atributo action da tag form e, nesse caso, vc não terá mais controle sobre os dados com o Javascript, daí, nesse estágio, a validação fica a cargo do back-end.

Ou seja, se vc quer validar os dados no front-end, terá obrigatoriamente que usar o event.preventDefault().

Grande abraço e bons estudos!

Opa, Grabriel! Muito Obrigado pela explicação! Porém ainda tenho um dúvida em relação ao If, tenho que colocar o event.preventDefault dentro dele ?

Vamos supor que eu tenha um formulário com um campo nome e um de idade e quero valida lo e exibir uma mensagem de erro, o event vai dentro do If assim como coloquei ou não ?

insira seu código aqui

<script>
 var botao = buscaSeletor(".botao");
botao.addEventListener("click", function(event){

If(form.nome.value.length == 0){
      event.preventDefault();
      alert("Preencha o campo nome");
    }
 If(forma.idade.value.length == 0{
      evento.preventDefault();
     alert("Preencha o campo idade");
}

});

function buscaSeletor (classe){
   document.querySelector(classe);
}
</script>

Por nada, Rene!

Caso vc queira permitir o envio dos dados caso eles estejam corretos, então o event.preventDefault() deve ficar apenas dentro do if que valida os dados e que acusa caso tenha algum problema.

Ah sim Gabriel, muito obrigado pela atenção! E sanou minhas dúvidas em relação a esse caso.

Abraço! :D

Por nada, Rene!

Dica: Em vez de colocar vários if's dentro do seu eventListener, dê preferência por criar uma função que recebe os dados do formulário como parâmetro e que internamente execute a lógica de validação. Dessa forma o seu código ficará mais legível e facilitará a manutenção.

Grande abraço e bons estudos!