jquery - 在提交按钮上使用 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，则该语句为 true，这意味着一个或多个字段无效。在这种情况下，将执行事件对象的 PreventDefault 方法。该对象被传递给提交事件处理程序的函数作为参数存储在该处理程序第一行的事件变量中。如果在将一个或多个字段提交到服务器时不使用 PreventDefault 方法，则表单将提交到服务器，因为这是其默认操作。”

任何见解将不胜感激。

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();
    }
});