Usando JQuery - impedindo o envio do formulário

177

Como impedir que um formulário seja enviado usando jquery?

Eu tentei de tudo - veja três opções diferentes que tentei abaixo, mas tudo não vai funcionar: 

    $(document).ready(function() { 

            //option A
            $("#form").submit(function(e){
                e.preventDefault();
            });

            //option B
            $("#form").submit(function(e){
                stopEvent(e);
            });

            //option C
            $("#form").submit(function(){
                return false;
            });
    });

O que pode estar errado?

Atualização - aqui está o meu html:

    <form id="form" class="form" action="page2.php" method="post"> 
       <!-- tags in the form -->
       <p class="class2">
           <input type="submit" value="Okay!" /> 
       </p>
    </form>

Há algo errado aqui?

jquery forms Lucy Weatherford
fonte
Mostre seu HTML porque não há nada errado com preventDefault ou retorne false quando você o postou, exceto que seu seletor está totalmente errado.
Sparky
1
return false;depois que .submit()funcionou para mim! Eu estava tendo o mesmo problema
d -_- b
Se houver um erro de JavaScript no manipulador, o e.preventDefault();código não será alcançado / executado.
Tom

Respostas:

263

Duas coisas se destacam:

  • É possível que o nome do seu formulário não seja form . Em vez disso, consulte a tag soltando o #.

  • Também e.preventDefaulté a sintaxe correta do JQuery, por exemplo

        //option A
    $("form").submit(function(e){
        e.preventDefault();
    });

A opção C também deve funcionar. Não estou familiarizado com a opção B

Um exemplo completo:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script type='text/javascript'>
         $(document).ready(function() {
            //option A
            $("form").submit(function(e){
                alert('submit intercepted');
                e.preventDefault(e);
            });
        });
        </script>
    </head>

    <body>
        <form action="http://google.com" method="GET">
          Search <input type='text' name='q' />
          <input type='submit'/>
        </form>
    </body>
</html>
Philip Fourie
fonte
2
Algo mais está errado. Eu estou usando essa técnica diariamente. O melhor palpite seria que haja erros de JavaScript na página, talvez verifique com o FireBug?
Philip Fourie
@ LucyWeatherford, atualizei minha resposta com uma amostra que funciona. Talvez você encontre alguma coisa.
Philip Fourie
No seu html de atualização, notei que você tem atributo de classe para o seu formulário. Mude o seletor JQuery de $('#form')para $('.form')para atributos de classe.
Philip Fourie
1
obrigado! Acabei usando seu código na mesma página e funcionou, ainda não tendo certeza do que estava errado, mas está tudo bem agora. obrigado!
Lucy Lucyford
1
@ ÂngeloRigo e é simplesmente o nome que você dá ao parâmetro, neste caso, é o evento de envio.
precisa saber é o seguinte
34

Você provavelmente possui poucos formulários na página e, usando $ ('form'). Submit () adiciona esse evento à primeira ocorrência do formulário em sua página. Use o seletor de classe ou tente o seguinte:

$('form').each(function(){
    $(this).submit(function(e){
        e.preventDefault();
        alert('it is working!');
        return  false;
    })
})

ou melhor:

$(document).on("submit", "form", function(e){
    e.preventDefault();
    alert('it works!');
    return  false;
});
Artem Kiselev
fonte
1
No meu caso, retornar false era uma chave.
Elquimista
19

Para impedir o padrão / impedir o envio de formulários, use

e.preventDefault();

Para interromper a subida do evento, use

e.stopPropagation();

Para impedir o envio de formulários, 'return false' também deve funcionar.

The Alpha
fonte
Veja esta resposta porque o jQuery lida com isso de maneira diferente. stackoverflow.com/questions/1357118/…
Sparky
1
Marque esta opção para entender a publicação de eventos quirksmode.org/js/events_order.html
The Alpha
2
O jQuery na API afirma: "O retorno falso de um manipulador de eventos chama automaticamente event.stopPropagation()e event.preventDefault(). Um falsevalor também pode ser passado para o manipulador como uma abreviação para function(){ return false; }".
Paul
7

Eu também tive o mesmo problema. Eu também tentei o que você tentou. Então eu mudo meu método para não usar o jquery, mas usando o atributo "onsubmit" na tag do formulário.

<form onsubmit="thefunction(); return false;">

Funciona.

Mas, quando tentei colocar o valor de retorno falso apenas em "thefunction ()", isso não impede o processo de envio, portanto, devo colocar "return false"; no atributo onsubmit. Portanto, concluo que meu aplicativo de formulário não pode obter o valor de retorno da função Javascript. Eu não tenho nenhuma idéia sobre isso.

Luki B. Subekti
fonte
1
É a diferença entre false;e return false;. Você precisaria teronsubmit="return thefunction();"
xr280xr 30/06
4

Eu tive o mesmo problema e resolvi desta maneira (não elegante, mas funciona):

$('#form').attr('onsubmit','return false;');

E tem a vantagem, na minha opinião, que você pode reverter a situação a qualquer momento:

$('#form').attr('onsubmit','return true;');
vinxxe
fonte
Talvez seja um pouco mais confortável remover o atributo ao reverter o formulário de prevenção de envio $('#form').removeAttr('onsubmit');
barbieswimcrew
4

Anexe o evento ao elemento de envio e não ao elemento de formulário. Por exemplo, no seu html, faça assim

$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
});
M Weiss
fonte
2

Você pode simplesmente verificar se o formulário é válido se sim, executar a lógica de envio, caso contrário, mostrar erro.

HTML

<form id="form" class="form" action="page2.php" method="post">
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />

    <input type="submit" value="Okay!" />
</form>

Javascript

    $(document).ready(function () {
        var isFormValid = true;

        function checkFormValidity(form){
            isFormValid = true;
            $(form).find(".check-validity").each(function(){
                var fieldVal = $.trim($(this).val());
                if(!fieldVal){
                    isFormValid = false;
                }
            });
        }


        //option A
        $("#form").submit(function (e) {
            checkFormValidity("#form");
            if(isFormValid){
                alert("Submit Form Submitted!!! :D");
            }else{
                alert("Form is not valid :(");
            }
            e.preventDefault();
        });
    });
Code Spy
fonte
1

Quando estou usando <form>tag sem o atributo id="form"e chamo-o pelo nome da tag diretamente no jquery, ele funciona comigo.
seu código no arquivo html:

<form action="page2.php" method="post">

e no script Jquery:

$(document).ready(function() {
      $('form').submit(function(evt){
          evt.preventDefault();// to stop form submitting
      });
 });
Noha Salah
fonte
1

$('#form')procura um elemento com id="form".

$('form') procura o elemento do formulário

Rahul
fonte
0

Você esquece o ID do formulário e funciona 

$('form#form').submit(function(e){
   e.preventDefault();
   alert('prevent submit');             
});
Shintadoniku Alyssa
fonte
0

Isso também parece funcionar e pode ser um pouco mais simples:

$('#Form').on('submit',function(){
    return false;
})
Ukuser32
fonte
0

Usando o jQuery, você pode fazer o seguinte:

1- Use o evento de envio do formulário nativo com um botão Enviar, enquanto impede o disparo do evento e, em seguida,

2- Verifique o formulário Propriedade válida Isso pode ser implementado da seguinte forma:

1- HTML:

 <form id="yourForm">
    <input id="submit" type="submit" value="Save"/>
</form>

2- Javascript

 $("form").on("submit", function (e) {
        e.preventDefault();
        if ($(this).valid()) {  
           alert('Success!');
        }
    });
Mohamed Nagieb
fonte