Código JavaScript para interromper o envio do formulário

206

Uma maneira de interromper o envio de formulários é retornar falso da sua função JavaScript.

Quando o botão Enviar é clicado, uma função de validação é chamada. Eu tenho um caso na validação de formulário. Se essa condição for atendida, chamo uma função chamada returnToPreviousPage ();

function returnToPreviousPage() {
    window.history.back();
}

Estou usando JavaScript e Dojo Toolkit .

Em vez de voltar à página anterior, ela envia o formulário. Como posso cancelar este envio e retornar à página anterior?

javascript html forms

— Muhammad Imran Tariq
fonte

RU Claro que esta função está chamando ?? tente colocar alerta ('teste'); antes de window.history

— samirprogrammer

sim eu tenho certeza; está sendo chamado.

— Muhammad Imran Tariq

8

possível duplicata de Como impedir que o formulário seja enviado?

— TJ

292

Você pode usar o valor de retorno da função para impedir o envio do formulário

<form name="myForm" onsubmit="return validateMyForm();">

e funcionar como

<script type="text/javascript">
function validateMyForm()
{
  if(check if your conditions are not satisfying)
  { 
    alert("validation failed false");
    returnToPreviousPage();
    return false;
  }

  alert("validations passed");
  return true;
}
</script>

No caso do Chrome 27.0.1453.116 m, se o código acima não funcionar, defina o campo returnValue do parâmetro do manipulador de eventos como false para fazê-lo funcionar.

Obrigado Sam por compartilhar informações.

EDIT:

Agradecemos a Vikram por sua solução alternativa para se validateMyForm () retorna false:

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

onde validateMyForm () é uma função que retorna false se a validação falhar. O ponto principal é usar o evento name. Não podemos usar para egepreventDefault ()

— Hemant Metalia
fonte

1

Apenas um palpite: não funciona para mim na versão mais recente do Chrome.

— Sam

5

Qualquer coisa que retorne falsenão parece ter nenhum efeito; O Chrome ainda envia o formulário. Por exemplo onsubmit="return false;",. No entanto, definir o returnValuecampo do parâmetro do manipulador de eventos como falsefunciona para mim.

— Sam

3

Oi Sam / Hemant, você pode fornecer um exemplo de código sobre como definir o campo returnValue do parâmetro do manipulador de eventos como false, por favor.

— JackDev 02/09

2

Penso que, uma vez que esta é a resposta aceita, provavelmente deve dizer como fazer isso corretamente. Eu, juntamente com o JackDev, estamos querendo saber como fazer isso funcionar corretamente. Como é que isso faz não trabalho

— Cruncher

1

Se validateMyForm()tiver erros return falsenão serão alcançados. Então, isso pode falhar. Depois de muitas horas, encontrei uma solução que funcionava e a publiquei abaixo.

— Vikram Pudi

116

Use evitar padrão

Dojo Toolkit

dojo.connect(form, "onsubmit", function(evt) {
    evt.preventDefault();
    window.history.back();
});

jQuery

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

JavaScript de baunilha

if (element.addEventListener) {
    element.addEventListener("submit", function(evt) {
        evt.preventDefault();
        window.history.back();
    }, true);
}
else {
    element.attachEvent('onsubmit', function(evt){
        evt.preventDefault();
        window.history.back();
    });
}

— Greg Guida
fonte

3

Eu recomendaria event.preventDefault () sobre falsa troca de uma série de razões, esta deve ser a resposta superior: blog.nmsdvid.com/...

— acidjazz

1

Boa resposta. Melhor que o escolhido.

— Ani Menon

2

Bom, mas onde você executaria a validação que o OP deseja?

— Sahand

1

@acidjazz Mas como acessar os dados do formulário após impedir o padrão?

— CodeAt30 18/02/19

@Sahand @ codeat30 Você pode acessar o evento target.

— Adrien

50

A seguir, funciona a partir de agora (testado no Chrome e Firefox):

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

Onde validateMyForm () é uma função que retorna falsese a validação falhar. O ponto principal é usar o nome event. Não podemos usar para, por exemplo e.preventDefault().

— Vikram Pudi
fonte

15

Basta usar um buttonbotão simples em vez de enviar. E chame uma função JavaScript para lidar com o envio de formulários:

<input type="button" name="submit" value="submit" onclick="submit_form();"/>

Função dentro de uma scripttag:

function submit_form() {
    if (conditions) {
        document.forms['myform'].submit();
    }
    else {
        returnToPreviousPage();
    }
}

Você também pode tentar window.history.forward(-1);

— dku.rajkumar
fonte

Eu gosto dessa abordagem porque permite meu caso de uso, retornos de chamada.

— Eddie

12

Isso impede o uso da tecla Enter para enviar o formulário. Além disso, novos atributos HTML5 como requirednão funcionarão.

— Sam

8

Muitas maneiras difíceis de fazer uma coisa fácil:

<form name="foo" onsubmit="return false">

— Danial
fonte

3

Esta resposta exata (OK, não é exata, pois falta um ponto-e-vírgula) foi enviada oito meses antes e tem votos negativos por um bom motivo. Isso funciona na maioria das vezes. Mas não em todos os navegadores tudo da época.

— Auspex

3

Eu não disse que você precisava de um ponto e vírgula; Eu indiquei que isso era tudo o que havia de diferente entre sua resposta e uma resposta muito mais antiga. O fato de você agora estar me pedindo para apontar quais navegadores não o suportam (nunca disse que havia, apenas apontei que nem sempre funcionará) prova que você ainda não leu toda esta página .

— Auspex

2

Normalmente, não examino os votos negativos, exceto que eu não sabia que as pessoas estavam votando negativamente no código correto. Tecnicamente, o ponto e vírgula é estranho, então está errado. E você disse que "o seu está faltando o ponto e vírgula", implicando que é necessário, o que está errado. Você diz que "nem sempre funciona", mas não pode apontar um único caso ou navegador onde não funcionará? Isso é lógica de som? É o código correto. Portanto, a menos que você possa apontar o caso em que ele não funcionará, então você não tem nenhum argumento.

— Danial

Como isso não tem mais votos positivos? É muito mais conciso se comparado aos outros exemplos.

— Sal Alturaigi 01/06

Provavelmente porque o título não corresponde ao que o cara estava realmente perguntando.

— Danial

6

Todas as suas respostas deram algo para trabalhar.

Por fim, funcionou para mim: (se você não escolher pelo menos um item da caixa de seleção, ele avisa e permanece na mesma página)

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form name="helloForm" action="HelloWorld" method="GET"  onsubmit="valthisform();">
            <br>
            <br><b> MY LIKES </b>
            <br>
            First Name: <input type="text" name="first_name" required>
            <br />
            Last Name: <input type="text" name="last_name"  required />
            <br>
            <input type="radio" name="modifyValues" value="uppercase" required="required">Convert to uppercase <br>
            <input type="radio" name="modifyValues" value="lowercase" required="required">Convert to lowercase <br>
            <input type="radio" name="modifyValues" value="asis"      required="required" checked="checked">Do not convert <br>
            <br>
            <input type="checkbox" name="c1" value="maths"     /> Maths
            <input type="checkbox" name="c1" value="physics"   /> Physics
            <input type="checkbox" name="c1" value="chemistry" /> Chemistry
            <br>

            <button onclick="submit">Submit</button>

            <!-- input type="submit" value="submit" / -->
            <script>
                <!---
                function valthisform() {
                    var checkboxs=document.getElementsByName("c1");
                    var okay=false;
                    for(var i=0,l=checkboxs.length;i<l;i++) {
                        if(checkboxs[i].checked) {
                            okay=true;
                            break;
                        }
                    }
                    if (!okay) { 
                        alert("Please check a checkbox");
                        event.preventDefault();
                    } else {
                    }
                }
                -->
            </script>
        </form>
    </body>
</html>

— Gdba
fonte

Trabalhou para mim também.

— chetan 12/07

4

Com base na resposta do @Vikram Pudi, também podemos fazer isso com Javascript puro

<form onsubmit="submitForm(event)">
    <input type="text">
    <input type="submit">
</form>

<script type="text/javascript">

    function submitForm(event){
        event.preventDefault();


    }
</script>

— Phan Van Linh
fonte

3

Eu recomendaria não usar onsubmite, em vez disso, anexar um evento no script.

var submit = document.getElementById("submitButtonId");
if (submit.addEventListener) {
  submit.addEventListener("click", returnToPreviousPage);
} else {
  submit.attachEvent("onclick", returnToPreviousPage);
}

Em seguida, use preventDefault()(ou returnValue = falsepara navegadores mais antigos).

function returnToPreviousPage (e) {
  e = e || window.event;
  // validation code

  // if invalid
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}

— Isaac Abramowitz
fonte

Você poderia explicar por que você não usaria onsubmit?

— theFreedomBanana

Talvez seja apenas preferência, mas acho mais fácil entender a funcionalidade de uma página da Web se todos os ouvintes de eventos estiverem anexados usando, em JSvez de HTMLusar atributos. Dessa forma, você não precisa de saltar para trás e para frente, tanto durante a leitura de código de outra pessoa

— Isaac Abramowitz

e se alguém pressionar enter em uma das entradas em vez de clicar no botão? em geral ii ainda envia ...

— bluejayke

1

Digamos que você tenha um formulário semelhante a este

<form action="membersDeleteAllData.html" method="post">
    <button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button>
</form>

Aqui está o javascript para a função confirmAction

<script type="text/javascript">
    function confirmAction(e)
    {
        var confirmation = confirm("Are you sure about this ?") ;

        if (!confirmation)
        {
            e.preventDefault() ;
            returnToPreviousPage();
        }

        return confirmation ;
    }
</script>

Este funciona no Firefox, Chrome, Internet Explorer (edge), Safari, etc.

Se não for esse o caso, avise-me

— Mauricio Gracia Gutierrez
fonte

1

A combinação de preventDefault()e returnToPreviousPage()é perfeita e elegante. Ele interrompe a operação normal, assim como você projetaria qualquer coletor de exceção para funcionar. +1.

— 1934286 9/04

1

As respostas de Hemant e Vikram não funcionaram totalmente para mim no Chrome. O event.preventDefault (); O script impediu o envio da página, independentemente de ser aprovado ou reprovado na validação. Em vez disso, tive que mover o event.preventDefault (); na instrução if da seguinte maneira:

    if(check if your conditions are not satisfying) 
    { 
    event.preventDefault();
    alert("validation failed false");
    returnToPreviousPage();
    return false;
    }
    alert("validations passed");
    return true;
    }

Agradeço a Hemant e Vikram por me colocarem no caminho certo.

— Jesperai
fonte

Trabalhou para mim também. Obrigado.

— ivbtar

1

Por exemplo, se você tiver o botão enviar no formulário, para interromper sua propagação, basta escrever event.preventDefault (); na função chamada ao clicar no botão Enviar ou no botão Enter.

— Dheeraj Nalawade
fonte

0

Basta fazê-lo ....

<form>
<!-- Your Input Elements -->
</form>

e aqui vai o seu JQuery

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});

— Matee Gojra
fonte

1

você usou jquery aqui?

— Selva Ganapathi