在单击按钮期间，jQuery验证不起作用

我有一个简单的页面，有一个表单和表单外的一个按钮。我正在尝试在单击按钮时验证表单。我已经在document.onready函数中添加了表单验证规则。但是表单没有得到验证

HTML

在jQuery的

validate（）

函数中，如果您在类为

的表单上调用它。form1

，则应将其正确命名为相应的ID

#form1

---

这应该可以解决您的问题。

如前所述，原始代码的目标是

类
，
.form1
，而实际的表单包含
id=“form1”
。将选择器固定为
id
的目标将很快解决此问题

$('#form1`).validate({...


尽管已经发布了一个答案，但我觉得还需要发布一些关于这个插件的常见误解的重要注释

.validate（）
方法仅用于插件初始化，而不是用于测试有效性的方法。因此，将
.validate（）
放在
单击处理程序中没有意义
.validate（）
只需要调用一次，因此每次单击时重复调用是多余的，也没有必要的

只要提交按钮位于
标记内，就不需要
单击处理程序，因为插件会自动捕获该处理程序。请参阅：

如果按钮在
之外，则可以使用
.valid（）
方法测试表单的有效性

$(document).ready(function () {

    $('#form1').validate({  // <-- INITIALIZE plugin on your form
        // your rules & options      
    });

    // For button OUTSIDE of form tags
    $("#name_id").click(function() {
        if ($('#form1').valid()) {
            alert("form is valid");
        } else {
            alert("form is invalid");
        }
    });

});

演示：

当然，您不必使用这些可选的回调函数。插件在没有它们的情况下运行良好，如前所示：

演示：
您是否尝试过使用$（'#form1'）.submit（函数（）{……}）；而不是
$（“#name_id”）。单击（函数（）{
通过修复问题中的代码，答案不再有任何意义。我将其回滚，以便读者能够理解接受的答案的工作原理。@Sidney Liebrand-不，这是不可能的。如果我这样添加，它将影响其他功能。处理
ID
和
类
一个常见的mis总是有点混乱就拿我也经历过很多次来说：）山姆：怎么可能？你的目标是一个不存在的类。ID应该是唯一的，如果你有多个相同的ID，你应该将其更改为一个类，否则将你的ID重命名为唯一的。@BarryChapman，他提到使用该ID会影响多个项目，因此我提到了上面，他会建议将ID更改为一些独特的东西谢谢你的澄清。我可以指出文档很糟糕。它说“验证-验证所选表单”。真的吗？那是错误的，或者说是没有意义的。它应该说的是“验证-将事件处理程序附加到表单，以便在以后每当按下“提交”按钮时对其进行验证。”@JohnHenckel，这也不准确，因为
.validate（）
方法的作用更大，除了单击“提交”按钮外，其他事件也会自动触发验证。您知道GitHub上提供了此免费插件的文档。换句话说，您可以将您的贡献、建议、添加或更正提交给开发人员以供加入。@Sparky，我可以，但你为什么不这样做呢？我打赌你会做得比我好得多。只需从你的答案中复制粘贴几句话到我发布的链接上。再次感谢。@JohnHenckel，谢谢……我过去对文档做了一些小的改进。不过，为了将来的参考。
$('#form1`).validate({...

$(document).ready(function () {

    $('#form1').validate({  // <-- INITIALIZE plugin on your form
        // your rules & options      
    });

    // For button OUTSIDE of form tags
    $("#name_id").click(function() {
        if ($('#form1').valid()) {
            alert("form is valid");
        } else {
            alert("form is invalid");
        }
    });

});

$(document).ready(function () {

    $('#form1').validate({  // <-- INITIALIZE plugin on your form
        // your rules & options,
        submitHandler: function(form) {
             alert("form is valid");
             return false;
        },
        invalidHandler: function() {
            alert("form is invalid");
        }
    });

});