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

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!");

});

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

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!

Prevenindo o submit direto no evento submit do formulário:

O exemplo acima resolve o clique no botão, mas tem um detalhe que pega muita gente de surpresa

Se o usuário apertar Enter dentro de um input, o formulário é enviado sem passar pelo clique no botão

Aí o teu preventDefault simplesmente não roda

A forma mais segura é escutar o evento submit do próprio form, e não o click do botão

assim tu cobre o clique e o Enter de uma vez só

const form = document.querySelector("form");

form.addEventListener("submit", function(e) {

e.preventDefault();

console.log("Insira aqui seu código!");

});

Repara que a lógica é a mesma: pegamos o objeto event, chamamos o preventDefault e o envio padrão do HTML não acontece mais

A diferença é QUAL elemento está sendo escutado

Eu costumo usar o submit no form como padrão, e deixo o click no botão só quando preciso reagir a um botão específico dentro do formulário 🙂

preventDefault ou return false? Qual usar:

Se você já viu código antigo, provavelmente topou com um return false dentro do onsubmit

Aí bate a dúvida: os dois fazem a mesma coisa?

Não exatamente

Dentro de uma função registrada com addEventListener, dar return false não impede nada, o formulário vai embora do mesmo jeito

O que segura o envio ali é o preventDefault do objeto event

O return false só tem esse efeito no atributo inline do HTML (aquele onsubmit="return validar()"), que é o jeitão antigo de fazer

Então a regra que eu sigo é simples: se você está escutando o evento com addEventListener, usa preventDefault e pronto

Tome cuidado com tutorial velho que mistura os dois, é fonte garantida de dor de cabeça

Como validar os campos antes de enviar o formulário:

Na prática a gente quase nunca quer só parar o envio

A gente quer parar, conferir alguma coisa e DEPOIS decidir se envia

O preventDefault entra justamente aí: ele te dá o controle da decisão

Veja como fica:

const form = document.querySelector("form");

form.addEventListener("submit", function(e) {

if (input.value.trim() === "") {

e.preventDefault();

console.log("Preencha o nome!");

return;

}

console.log("Tudo certo, pode enviar");

});

Se o campo estiver vazio, chamamos o preventDefault e o envio morre ali

Se estiver preenchido, a gente não chama nada e o formulário segue o fluxo normal do HTML

Ou seja: o preventDefault não precisa ser incondicional, ele pode ser a consequência da tua validação

É como um porteiro, só barra quem não tem nome na lista 😀

Perguntas frequentes sobre prevenir o submit:

O preventDefault impede o envio quando aperto Enter no input?

Depende de onde você colocou o evento

No click do botão, não: o Enter dispara o envio sem passar pelo clique

No evento submit do formulário, sim: ele cobre o clique e o Enter

Qual a diferença entre preventDefault e stopPropagation?

São coisas diferentes e é comum confundirem

O preventDefault cancela a ação padrão do navegador (no nosso caso, enviar o form)

O stopPropagation não cancela ação nenhuma, ele só impede que o evento continue subindo pelos elementos pais

Se o teu problema é o formulário sendo enviado, o método é o preventDefault

Por que meu preventDefault não está funcionando?

Os suspeitos de sempre:

o seletor não encontrou o elemento (o script rodou antes do HTML existir)

você escutou o click do botão e o envio veio pelo Enter

você usou return false dentro de um addEventListener

Dá uma olhada nesses três antes de sair mudando o resto do código

Dá pra bloquear o envio sem JavaScript?

O atributo required do HTML já segura o envio de campo obrigatório vazio, sem escrever uma linha de JS

Agora, se a tua regra é qualquer coisa além disso, aí é JavaScript com preventDefault mesmo