Como parar envio de formulário com JavaScript

Neste artigo você vai aprender em detalhes como parar envio de formulário com JavaScript, vem conferir!

Fala programador(a), beleza? Bora aprender mais sobre formulários em JavaScript!

Quando se trabalha com formulários em JavaScript, há momentos em que é necessário parar o envio do formulário para realizar alguma validação ou processamento adicional.

Neste artigo, discutiremos as várias maneiras de parar o envio de formulário com JavaScript.

Utilizando o evento submit

A maneira mais comum de parar o envio de um formulário é usando o evento submit.

O evento submit é acionado quando o usuário clica no botão de envio do formulário.

Para parar o envio do formulário, é necessário cancelar esse evento.

Aqui está um exemplo:

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

form.addEventListener('submit', (event) => {
  event.preventDefault();
  // faça a validação ou processamento adicional aqui
});

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

Nesse exemplo, adicionamos um ouvinte de evento para o evento submit do formulário.

Quando o evento submit é acionado, chamamos o método preventDefault() do objeto evento para cancelar o envio do formulário.

Em seguida, podemos realizar a validação ou processamento adicional.

Utilizando o atributo onsubmit

Outra maneira de parar o envio de um formulário é usando o atributo onsubmit.

O atributo onsubmit permite que você especifique uma função a ser executada quando o formulário é enviado.

Aqui está um exemplo:

<form onsubmit="return validaFormulario()">
  <input type="text" name="nome">
  <input type="submit" value="Enviar">
</form>

<script>
  function validaFormulario() {
    // faça a validação aqui
    return false; // para cancelar o envio do formulário
  }
</script>

Nesse exemplo, usamos o atributo onsubmit no elemento de formulário para especificar uma função chamada “validaFormulario()” que será executada quando o formulário for enviado.

Essa função realiza a validação do formulário e retorna false para cancelar o envio do formulário.

Utilizando o método submit()

Por fim, você também pode parar o envio de um formulário com JavaScript usando o método submit().

Aqui está um exemplo:

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

form.addEventListener('submit', (event) => {
  event.preventDefault();
  // faça a validação ou processamento adicional aqui
  form.submit(); // envia o formulário após o processamento adicional
});

Nesse exemplo, adicionamos um ouvinte de evento para o evento submit do formulário.

Quando o evento submit é acionado, chamamos o método preventDefault() do objeto evento para cancelar o envio do formulário.

Em seguida, realizamos a validação ou processamento adicional e, por fim, chamamos o método submit() do objeto formulário para enviar o formulário.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Em resumo, parar o envio de formulário com JavaScript é uma tarefa importante para realizar validações e processamentos adicionais antes do envio.

Existem diversas maneiras de parar o envio do formulário, como o uso do evento submit, do atributo onsubmit e do método submit().

Cada método tem suas próprias vantagens e desvantagens e o desenvolvedor deve escolher a solução mais adequada para cada caso.

É importante lembrar que as técnicas discutidas neste artigo podem tornar seus formulários mais interativos e eficientes, mas é necessário sempre considerar as implicações de desempenho do código.

Com essas informações, você poderá implementar as melhores práticas em seus projetos web e garantir a melhor experiência possível para seus usuários.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Explica a diferença que quase todo mundo tropeça

O event.preventDefault() cancela SÓ a ação padrão do evento (o envio), mas o resto do código continua rodando normal

Já o return false dentro de um onsubmit faz duas coisas de uma vez: cancela o envio E interrompe a propagação do evento

Se você conhece jQuery, o return false de lá é ainda mais agressivo, mas no onsubmit puro do HTML o efeito prático pra travar o formulário é o mesmo

Regra simples pra não errar:

Usou addEventListener(‘submit’, …)? Vai de event.preventDefault()

Usou onsubmit="return …" direto na tag? Aí o return false resolve

O post mostra ONDE colocar a validação (// faça a validação aqui) mas nunca mostra uma validação de verdade

Bora ver na prática com um campo obrigatório?

[bloco de código] um exemplo real: pega o valor do input, se estiver vazio dá preventDefault(), mostra uma mensagem de erro e para por ali; se tiver preenchido, deixa seguir

Assim o leitor sai com um exemplo funcional de ponta a ponta, não só o esqueleto

Dica: valide sempre no back-end também, validação só no JavaScript o usuário contorna fácil

Como parar o envio de um formulário sem JavaScript? Dá pra usar validação nativa do HTML5 com o atributo required e os tipos de input (email, number e etc), o navegador segura o envio sozinho quando o campo não bate

Qual a diferença entre preventDefault() e stopPropagation()? O preventDefault() cancela a ação padrão (o envio); o stopPropagation() impede o evento de subir pros elementos pais, são coisas diferentes e às vezes você usa os dois juntos

Como enviar o formulário depois da validação? Depois de validar, é só chamar form.submit() no objeto do formulário, igual mostramos na seção do método submit()

Por que meu preventDefault() não funciona? Motivo clássico: o parâmetro do evento não foi passado pra função, ou o listener está no elemento errado, se liga se você pegou o form certo com o querySelector