Impedir JavaScript de envio de formulário

Kushank Singh 12 outubro 2023
  1. Use uma função dentro da tag script para parar a execução de um formulário em JavaScript
  2. Use o Vanilla JavaScript para interromper a execução do formulário em JavaScript
  3. Use a biblioteca jQuery para interromper a execução do formulário em JavaScript
  4. Use o Dojo Toolkit para parar a execução do formulário em JavaScript
Impedir JavaScript de envio de formulário

JavaScript é suportado por todos os navegadores da web e é usado para criar páginas da web dinâmicas. Neste tutorial, pararemos a execução de um formulário usando JavaScript.

Use uma função dentro da tag script para parar a execução de um formulário em JavaScript

A tag script é usada para conter um script do lado do cliente. Criamos uma função JavaScript dentro das tags script para evitar o envio do formulário.

Verifique o código abaixo.

<form onsubmit="submitForm(event)">
  <input type="text">
  <button type="submit">Submit</button>
</form>
<script type="text/JavaScript">
  function submitForm(event){
    event.preventDefault();
    window.history.back();
  }
</script>

A função preventDefault() não permite que a ação padrão do evento ocorra. O window.history.back() nos leva ao URL anterior em nosso histórico. Todos os métodos discutidos incluirão essas duas funções.

Use o Vanilla JavaScript para interromper a execução do formulário em JavaScript

Vanilla JavaScript funciona puramente em JavaScript sem o uso de nenhuma biblioteca adicional.

Um ouvinte de evento pode ser usado para evitar o envio do formulário. Ele é adicionado ao botão de envio, que executará a função e evitará o envio de um formulário ao ser clicado.

Por exemplo,

element.addEventListener('submit', function(event) {
  event.preventDefault();
  window.history.back();
}, true);

Use a biblioteca jQuery para interromper a execução do formulário em JavaScript

jQuery é uma biblioteca rápida e robusta que simplifica o uso de JavaScript. É uma das bibliotecas mais populares de JavaScript.

Veremos como o podemos evitar o envio do formulário.

Verifique o código abaixo.

$('#form').submit(function(event) {
  event.preventDefault();
  window.history.back();
});

A função $('#form').submit() é usada para enviar um formulário em jQuery.

Use o Dojo Toolkit para parar a execução do formulário em JavaScript

É uma biblioteca JavaScript que ajuda a facilitar o uso de plataforma cruzada de JavaScript para aplicativos baseados na web. Ele usa a função dojo.connect() para manipular eventos. No nosso caso, isso é usado para envio de formulário, e evitaremos isso usando as funções preventDefault() e window.history.back().

Por exemplo,

dojo.connect(form, 'submit', function(event) {
  event.preventDefault();
  window.history.back();
});

Artigo relacionado - JavaScript Form