Como impedir que o formulário seja enviado?

Eu tenho um formulário que possui um botão de envio em algum lugar.

No entanto, gostaria de "capturar" o evento de envio e impedir que ele ocorra.

Existe alguma maneira de fazer isso?

Não consigo modificar o botão enviar, porque faz parte de um controle personalizado.

Diferentemente das outras respostas, o retorno falseé apenas parte da resposta. Considere o cenário em que um erro JS ocorre antes da instrução de retorno ...

html

<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

roteiro

function mySubmitFunction()
{
  someBug()
  return false;
}

retornar falseaqui não será executado e o formulário será enviado de qualquer maneira. Você também deve ligar preventDefaultpara impedir a ação de formulário padrão para envios de formulário do Ajax.

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

Nesse caso, mesmo com o bug, o formulário não será enviado!

Alternativamente, um try...catchbloco pode ser usado.

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}

Você pode usar um evento embutido onsubmitcomo este

<form onsubmit="alert('stop submit'); return false;" >

Ou

<script>
   function toSubmit(){
      alert('I will not submit');
      return false;
   }
</script>

<form onsubmit="return toSubmit();" >

Demo

Agora, isso pode não ser uma boa ideia ao fazer grandes projetos. Pode ser necessário usar ouvintes de eventos.

Por favor, leia mais sobre inline Eventos vs Ouvintes de eventos (addEventListener e attachEvent do IE) aqui . Pois não posso explicar mais do que Chris Baker .

Ambos estão corretos, mas nenhum deles é "melhor" por si só, e pode haver um motivo para o desenvolvedor escolher usar as duas abordagens.

Anexe um ouvinte de evento ao formulário usando .addEventListener()e chame o .preventDefault()método em event:

const element = document.querySelector('form');
element.addEventListener('submit', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
});

<form>
  <button type="submit">Submit</button>
</form>

Eu acho que é uma solução melhor do que definir um submitmanipulador de eventos alinhado com o onsubmitatributo porque ele separa a lógica e a estrutura da página da web. É muito mais fácil manter um projeto em que a lógica é separada do HTML. Consulte: JavaScript discreto .

Usar a .onsubmitpropriedade do formobjeto DOM não é uma boa ideia, pois impede que você anexe vários retornos de chamada de envio a um elemento. Veja addEventListener vs onclick .

Tente este...

Código HTML

<form class="submit">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="Submit" value="submit"/>
</form>

Código jQuery

$(function(){
    $('.submit').on('submit', function(event){
        event.preventDefault();
        alert("Form Submission stopped.");
    });
});

ou

$(function(){
    $('.submit').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented / stopped.");
    });
});

A seguir, funciona a partir de agora (testado no chrome e no firefox):

<form onsubmit="event.preventDefault(); return validateMyForm();">

onde validateMyForm () é uma função que retorna falsese a validação falhar. O ponto principal é usar o nome event. Não podemos usar por exemploe.preventDefault()

var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}

Para seguir convenções de programação JavaScript discretas e, dependendo da rapidez com que o DOM será carregado, pode ser uma boa ideia usar o seguinte:

<form onsubmit="return false;"></form>

Em seguida, conecte eventos usando o onload ou o DOM pronto, se você estiver usando uma biblioteca.

$(function() {
    var $form = $('#my-form');
    $form.removeAttr('onsubmit');
    $form.submit(function(ev) {
        // quick validation example...
        $form.children('input[type="text"]').each(function(){
            if($(this).val().length == 0) {
                alert('You are missing a field');
                ev.preventDefault();
            }
        });
    });
});

label {
    display: block;
}

#my-form > input[type="text"] {
    background: cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form" action="http://google.com" method="GET" onsubmit="return false;">
    <label>Your first name</label>
    <input type="text" name="first-name"/>
    <label>Your last name</label>
    <input type="text" name="last-name" /> <br />
    <input type="submit" />
</form>

Além disso, eu sempre usaria o actionatributo, pois algumas pessoas podem ter algum plug-in como o NoScript em execução, que quebraria a validação. Se você estiver usando o atributo action, no mínimo, seu usuário será redirecionado pelo servidor com base na validação de back-end. Se você estiver usando algo como window.location, por outro lado, as coisas serão ruins.

Para impedir o envio do formulário, você só precisa fazer isso.

<form onsubmit="event.preventDefault()">
    .....
</form>

Ao usar o código acima, isso impedirá o envio do seu formulário.

Aqui está a minha resposta:

<form onsubmit="event.preventDefault();searchOrder(event);">
...
</form>
<script>
const searchOrder = e => {
    e.preventDefault();
    const name = e.target.name.value;
    renderSearching();

    return false;
}
</script>

Eu adicionar event.preventDefault();em onsubmite ele funciona.

Você pode adicionar eventListner ao formulário that preventDefault()e converter os dados do formulário em JSON como abaixo:

const formToJSON = elements => [].reduce.call(elements, (data, element) => {
  data[element.name] = element.value;
  return data;

}, {});

const handleFormSubmit = event => {
    event.preventDefault();
    const data = formToJSON(form.elements);
    console.log(data);
  //  const odata = JSON.stringify(data, null, "  ");
  const jdata = JSON.stringify(data);
    console.log(jdata);

    (async () => {
      const rawResponse = await fetch('/', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: jdata
      });
      const content = await rawResponse.json();

      console.log(content);
    })();
};

const form = document.forms['myForm']; 
form.addEventListener('submit', handleFormSubmit);

<form id="myForm" action="/" method="post" accept-charset="utf-8">
    <label>Checkbox:
        <input type="checkbox" name="checkbox" value="on">
    </label><br /><br />

    <label>Number:
        <input name="number" type="number" value="123" />
    </label><br /><br />

    <label>Password:
        <input name="password" type="password" />
    </label>
    <br /><br />

    <label for="radio">Type:
        <label for="a">A
            <input type="radio" name="radio" id="a" value="a" />
        </label>
        <label for="b">B
            <input type="radio" name="radio" id="b" value="b" checked />
        </label>
        <label for="c">C
            <input type="radio" name="radio" id="c" value="c" />
        </label>
    </label>
    <br /><br />

    <label>Textarea:
        <textarea name="text_area" rows="10" cols="50">Write something here.</textarea>
    </label>
    <br /><br />

    <label>Select:
        <select name="select">
            <option value="a">Value A</option>
            <option value="b" selected>Value B</option>
            <option value="c">Value C</option>
        </select>
    </label>
    <br /><br />

    <label>Submit:
        <input type="submit" value="Login">
    </label>
    <br /><br />


</form>