Como impedir que o formulário seja enviado?


243

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.


Você ainda pode acessar o botão enviar. Renderize a página e pegue seu ClientID exibindo a origem da página. Então, usando algo como jQuery, você poderia fazer algo como $ ('# ctl01_cph01_controlBtn1'). Click (function () {return false;});
28510 rebelliard

@ Rafael: Verdade ... mas isso seria um último recurso - este é um controle muito complexo.
Nathan Osman

O @Raf é baseado no asp.net e também não é uma prática recomendada. Mas é essencialmente correto. Eu evitaria espiar a fonte e usar o nome do controle, pois isso pode mudar se alguém editar a página. Efeitos colaterais não intencionais e tal.

Respostas:


260

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;
}

4
Por que não retornar falsediretamente de onsumbit?
ProfK 22/03

1
Você pode querer mostrar uma mensagem de erro para o usuário no envio. Por exemplo, "preencha este campo obrigatório e envie". Nesse caso, event.preventDefault será muito útil
Mark Chorley

1
@ProfK se você usar event.preventDefault () não vai importa independentemente, try / catch seria apenas parte de seu tratamento de erros
Ben Rowe

11
<form onsubmit = "return mySubmitFunction (evento)"> funcionou ... tive que usar a palavra evento entre parênteses no firefox
danday74

5
@BenRowe Você deve adicionar o parâmetro evt ao método chamado. (<form onsubmit="return mySubmitFunction(evt)">)Caso contrário, ocorrerá um erro indefinido.
precisa saber é o seguinte

143

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.


Solução agradável e rápida na estrada.
Fernando Torres

por alguma razão, <form onsubmit="return false;" >não funciona para mim.
Ruan

102

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 .


1
e para jquery: $("button").click(function(e) { e.preventDefault() });
Nixen85 /

2
+1 não sei por que todas as outras respostas continuam usando submissões em linha, já que o OP mencionou que ele não pode alterar o botão (o que significa que ele provavelmente também não pode alterar a forma). Querendo saber se há uma maneira de obter a 'forma' se temos o botão ID
Robert Sinclair

16

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.");
    });
});

18
Não há tag jQuery nesta pergunta.
Michał Perłakowski

6
@ Gothdo e ainda assim a solução ainda é a mesma. louco né?
Kevin B

7
@ Gotico sim, é exatamente o mesmo. eventObject.preventDefault. A maneira como você liga o manipulador não altera a solução. Eu diria até que sua resposta não é diferente da aceita.
Kevin B

stopPropagationfoi a única coisa que funcionou no meu caso. obrigado! :)
cregox

13

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()


1
onsubmit = "retornar validateMyForm ();" é suficiente, mas validateMyForm () deve retornar verdadeiro ou falso.
Adrian P.

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

2
Eu acho que usar .onsubmité uma péssima idéia porque impede você de anexar vários submitretornos de chamada a um elemento. Eu recomendo usar .addEventListener().
Michał Perłakowski

3
Mesmo se você tiver definido um manipulador de eventos por meio da propriedade .onsubmit, ainda poderá adicionar manipuladores adicionais por meio de .addEventListener (). O manipulador registrado pela propriedade será chamado primeiro, depois os registrados com .addEventListener () na ordem em que foram registrados.
Daniel Granger

2

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.


2

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.


0

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.


0

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>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.