Por que minha função onSubmit está deixando cedo e não está retornando falsa?

Question

<form method="post" action="/Order/CheckOut/" onSubmit="return Validate()">

e depois...

function Validate() {
    alert($("#email").val());
    return false;
}

A parte confusa é quando eu retiro o alerta, ele funciona bem, o envio falha, mas quando eu coloco o alerta, ele permite que o envio passe ... o que diabos?

Eu também tentei o seguinte:

function Validate() {
    if(document.getElementByID("email").value == "test"){
        alert("It says test.");
    }
    return false;
}

E obteve o mesmo comportamento, nunca chegaria à declaração de retorno ...

Se eu passar pelo JS com o Firebug e quebrar o alerta ou o if (dependendo da versão acima), ele para por aí, e eu clico em 'ENTÃO' e ele apenas envia o formulário, por que não está chegando ao retornar uma linha falsa?

Answer 1

Por que não embrulhá -lo em um bloco de tentativa?

function Validate() {
    try {
        alert($("#email").val());
    } catch (e) {
        alert("Problem: " + e);
    }

    return false;
}

Answer 2

Você poderia usar event.preventDefault() em vez de.

$("form[name='myForm']").submit(function(e){
  e.preventDefault();
  alert($("#email").val());
});

Você deve tentar manter seu JavaScript, CSS e HTML todos separados. Não os integra, ou você tornará o projeto mais difícil de gerenciar. Em vez de usar o onsubmit atributo em html, basta anexar sua lógica ao $.submit() Método do formulário do seu JavaScript, como eu fiz acima.

Este exemplo pressupõe que você tenha dado ao seu formulário um nome de "myform". Eu apenas usei isso no exemplo, pois você deve efetuar de qual formulário está lidando com o evento de envio e não use um genérico $("form") Seletor.

Answer 3

Se você já está usando o jQuery, está fazendo tudo errado para começar. Você não deveria estar especificando manualmente o onSubmit manipulador de dentro do <form> elemento. Faça o que @jon sugeriu e apenas vincule o evento de envio:

$("form").submit(function() {
    alert($("#email").val());
    return false;
});

Answer 4

O problema não é que sua função esteja retornando verdadeiro. O problema é que o JavaScript no alerta está falhando e o JavaScript deixa de interpretar o código. Nesse ponto, o navegador continua com a ação padrão que deve enviar o formulário.

É por isso que Jonathan Sampson sugere o uso de e.PreventDefault () antes do alerta (), dessa maneira, o navegador não continua com seu comportamento padrão quando o alert () falhar.