JavaScript

Como prevenir submit de formulário com JavaScript

19 de junho de 2021

Como prevenir submit de formulário com JavaScript

Neste artigo você vai aprender a como prevenir submit de formulário com JavaScript, ou seja, impedir que formulário seja enviado com JavaScript

Neste artigo você vai aprender a como prevenir submit de formulário com JavaScript, ou seja, impedir que formulário seja enviado com JavaScript capa

Fala programador(a), beleza? Bora aprender mais sobre envio de formulários e também sobre JavaScript!

Podemos mapear o evento de click do botão de submit do formulário, inserindo um evento nele

Em eventos de click temos acesso a um objeto, o event

Ele possui alguns métodos e propriedade que nos ajudam a trabalhar melhor com o evento em si

Vamos precisar invocar o método preventDefault, este método é o responsável para parar a execução do formulário que é o evento nativo do HTML

Veja um exemplo prático da situação acima:

<form action="">
  <input type="text" name="name">
  <input type="submit" id="submit" value="Enviar">
</form>

Este será o nosso HTML de referência, vamos agora ao JS:

const btn = document.querySelector("#submit");

btn.addEventListener("click", function(e) {
	
  e.preventDefault();
  
  console.log("Insira aqui seu código!");

});

Primeiramente selecionamos o botão de submit, e então criamos um evento de click nele

Neste evento resgatamos o parâmetro event, chamado de e (forma resumida, mas dá no mesmo)

Invocamos o método preventDefault dele, ou seja, o form não é mais enviado como normalmente

E então onde há o console.log podemos inserir o código que precisamos para executar a lógica da nossa aplicação

O JavaScript será executado normalmente, como se não houvesse o envio do formulário

Conclusão

Neste artigo você aprendeu a como prevenir submit de formulário com JavaScript, ou seja, parar o envio do form com JS

Utilizamos um objeto chamado event, que vem no evento click

E deste objeto invocamos o método preventDefault, que para o envio padrão de formulário do HTML, assim resolvendo nosso problema

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x