在提交按钮上使用preventDefault

Question

我正在尝试解决一本jQuery教材提供的问题。它的内容如下：

“即使没有输入任何内容，数据也会被提交。要解决这个问题，您必须停止提交按钮的默认操作。为此，请在文件末尾的if语句中编写事件对象的preventDefault方法，如图10-6所示。”

注意* 这是10-6中的代码，在我按照书上的建议将其添加到我的代码末尾时，它并没有起作用。

if (isValid == false) { event.preventDefault(); }

请记住，您用于事件对象的名称必须与用于提交事件处理程序的参数的名称相同。

注意* 提交事件处理程序的格式如下：

    $("#email_form").submit(
    function() {
        var isValid = true;

                      // the script proceeds to validate each text field accordingly                    bla bla bla

现在，用空字段再次进行测试。这应该会在每个字段的右侧显示“此字段为必填项”，除了邮政编码字段。

我的问题是，我的preventDefault不起作用，无论我尝试什么都会提交。

来自解释图10-6的有趣注释可能有帮助，但我不太理解，如下所示。

"在这里，您可以看到一个最终的if语句，如果isValid变量为false，则为真，这意味着一个或多个字段无效。在这种情况下，执行事件对象的preventDefault方法。这个对象被传递给提交事件处理程序的函数作为参数，并由这个处理程序中第一行存储在事件变量中。如果您在提交一个或多个字段提交到服务器时不使用preventDefault方法，则表单将提交到服务器，因为这是它的默认操作。"

非常感谢您提供任何见解。

- user2113538

---

你必须将 event 传递到函数中才能使用 event.preventDefault()。function(event) { event.preventDefault() ... - Sparky

.submit(function(event){（这是作者所指的，必须将 event 传递给事件处理函数） - Brad Christie

Answer 1

event 变量是必须传递给您的处理程序的内容。您的匿名函数 function(){} 需要接收 event 变量：

$("#email_form").submit(function(event){
    var isValid = true;

    // do all your validation here
    // potentially if one of the fields is empty 
    // isValid will be set to false

    if (!isValid) {
        event.preventDefault();
    }
});

- helloandre

---

是的，但我仍需要加入if语句...你是在建议像这样吗？if (isValid == false) {$("#email_form").submit(function(event){ event.preventDefault(); });我只是不确定如何编写这行代码，但感谢你的帮助Andre... - user2113538

你需要将if语句放在函数内部，在检查完所有内容之后再进行。请参考更新的答案。 - helloandre

这个方案在2016年仍然可行，使用最新的jQuery。非常好的解决方案，也适用于文件上传！ - KJS

Answer 2

我今天在课堂上学到了答案，实际上是像这样的。

$("#email_form").submit(
function(event) {
    var isValid = true;

需要在验证结束时（下方）放置我的函数...

if (isValid == false) { event.preventDefault(); }

在我的提交按钮的事件处理程序中与事件进行交互。

- user2113538