在提交按钮上使用 preventDefault答案

【问题标题】：Using preventDefault on a submit button在提交按钮上使用 preventDefault
【发布时间】：2013-02-27 02:03:52
【问题描述】：

我正在尝试解决 jQuery 教科书提供的问题。是这样写的

“即使没有输入数据也会提交数据，要解决此问题，您必须停止提交按钮的默认操作。为此，请在 if 语句末尾的 if 语句中编写 event 对象的 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，这意味着一个或多个字段无效。在这种情况下，执行 event 对象的 preventDefault 方法。这个对象被传递给提交事件处理程序的函数作为参数存储在该处理程序的第一行的事件变量中。如果在一个或多个字段提交到服务器时不使用 preventDefault 方法，表单将被提交到服务器，因为这是它的默认操作。”

任何见解将不胜感激。

【问题讨论】：

您必须将event 传递到函数中才能使用event.preventDefault()。 function(event) { event.preventDefault() ...
.submit(function(event){（作者指的是这个，event必须传给事件处理函数）

标签： jquery events submit preventdefault

【解决方案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();
    }
});

【讨论】：

是的，但我仍然需要合并 if 语句......你是在建议这样的事情吗？ if (isValid == false) { $("#email_form").submit(function(event){ event.preventDefault(); });我只是不知道如何写这行，但谢谢你安德烈的帮助......
你想要 if 语句 inside 函数，在你检查了所有东西之后。查看更新的答案。
这个在 2016 年仍然有效，使用最新的 jQuery。很棒的解决方案，也适用于文件上传！

【解决方案2】：

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

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

需要在验证结束时有我的功能（下）...

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

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

【讨论】：