为什么我的 onsubmit 函数提前退出并且不返回 false？

Question

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

然后...

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

混乱的部分是当我取出警报时它工作正常，提交失败，但是当我放入警报时，它允许提交通过...到底是什么？

我也尝试过这个：

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

并得到了相同的行为，它永远不会进入 return 语句...

如果我使用 firebug 执行 JS 并在警报或 if 处中断（取决于上面的版本），它会在那里停止，我单击“步入”，它只是提交表单，为什么它没有进入 return false 行？

Answer 1

为什么不把它包装在 try 块中呢？

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

    return false;
}

Answer 2

您可以使用 event.preventDefault() 来代替。

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

您应该尝试将 javascript、css 和 html 分开。不要集成它们，否则会使项目更难以管理。不要在 HTML 中使用 onsubmit 属性，只需将您的逻辑从 javascript 附加到表单的 $.submit() 方法，就像我上面所做的那样。

此示例假设您已将表单命名为“myForm”。我只是在示例中使用了它，因为您应该明确要处理哪个表单的提交事件，而不是使用通用的 $("form") 选择器。

Answer 3

如果您已经在使用 jQuery，那么您一开始就做错了。您不应在

元素中手动指定 onSubmit 处理程序。按照@Jon的建议进行操作并绑定提交事件：

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

Answer 4

问题不在于你的函数返回 true。问题在于警报中的 JavaScript 发生故障，并且 JavaScript 停止解释代码。此时，浏览器将继续执行默认操作，即提交表单。

这就是为什么 Jonathan Sampson 建议在alert()之前使用e.preventDefault()，这样当alert()失败时浏览器就不会继续其默认行为。