Javascript 为什么只验证第一个表单？

请参考以下小提琴

<form action="http://someurl.com/" id="test-form-1" method="post" name="test-form-1">
  <input class="test-domainurl" type="url"> <input class="test-order-button" type="submit" value="Continue to Order">
</form>
<form action="http://someurl.com/" id="test-form-2" method="post" name="test-form-2">
  <input class="test-domainurl" type="url"> <input class="test-order-button" type="submit" value="Continue to Order">
</form>


jQuery(document).ready(function($) {
    $(".test-order-button").click(function() {
        $("#test-form-1").validate({});
        $("#test-form-2").validate({});
        $(".test-domainurl").rules("add", {
            required: true
        });
    });
});

jQuery（文档）.ready（函数（$）{
$（“.test order button”）。单击（函数（）{
$（“#test-form-1”）.validate（{}）；
$（“#test-form-2”）.validate（{}）；
$（“.test domainurl”）.rules（“添加”{
必填项：true
});
});
});

我不知道为什么只验证第一个表单

有什么想法和建议吗

---

谢谢

我从未使用过validate插件，但我猜选择器仅限于插件中的第一个匹配项。如果您单独添加规则，它似乎会起作用

例如：

jQuery(document).ready(function($) {
    $(".test-order-button").click(function() {
        $("#test-form-1").validate({});
        $("#test-form-2").validate({});
        $(".test-domainurl").each(function(index, el) {
            $(el).rules("add", {
                required: true
            });
        });
    });
});

---

我从未使用过validate插件，但我猜选择器仅限于插件中的第一个匹配项。如果您单独添加规则，它似乎会起作用

例如：

jQuery(document).ready(function($) {
    $(".test-order-button").click(function() {
        $("#test-form-1").validate({});
        $("#test-form-2").validate({});
        $(".test-domainurl").each(function(index, el) {
            $(el).rules("add", {
                required: true
            });
        });
    });
});

您应该在css选择器中使用

$（this）

，并使用

parent（）

和

同级（'.test domainurl'）

查找与每个按钮对应的元素

jQuery(document).ready(function($) {
    $(".test-order-button").click(function() {
        $(this).parent().validate({});
        $(this).siblings('.test-domainurl').rules("add", {
            required: true
        });
    });
});

您应该在css选择器中使用

$（this）

，并使用

parent（）

和

同级（'.test domainurl'）

查找与每个按钮对应的元素

jQuery(document).ready(function($) {
    $(".test-order-button").click(function() {
        $(this).parent().validate({});
        $(this).siblings('.test-domainurl').rules("add", {
            required: true
        });
    });
});

---

关于您对代码在IE7和IE8中不起作用的评论

1） 您完全不需要将

.validate（）

包含在

单击事件处理程序中。
.validate（）
方法只是插件的初始化，而不是测试方法。
.validate（）
方法只需要在DOM就绪时调用一次，并且任何后续调用都将被忽略。执行验证测试是因为插件会自动捕获单击

2） 将
.rules（）
方法附加到包含多个元素的jQuery对象时，必须将其包含在jQuery
.each（）
中。否则，
.rules（）
方法将只将规则分配给第一个匹配元素

这是正确的方法

jQuery(document).ready(function($) {

    $("#test-form-1").validate({});  // intialize plugin on first form

    $("#test-form-2").validate({});  // intialize plugin on second form

    $(".test-domainurl").each(function() {  // select applicable inputs
        $(this).rules("add", {              // apply the rule to each selected input
            required: true
        });
    });

});

关于你对你的代码在IE7和IE8中不起作用的评论

1） 您完全不需要将
.validate（）
包含在
单击事件处理程序中。
.validate（）
方法只是插件的初始化，而不是测试方法。
.validate（）
方法只需要在DOM就绪时调用一次，并且任何后续调用都将被忽略。执行验证测试是因为插件会自动捕获单击

2） 将
.rules（）
方法附加到包含多个元素的jQuery对象时，必须将其包含在jQuery
.each（）
中。否则，
.rules（）
方法将只将规则分配给第一个匹配元素

这是正确的方法

jQuery(document).ready(function($) {

    $("#test-form-1").validate({});  // intialize plugin on first form

    $("#test-form-2").validate({});  // intialize plugin on second form

    $(".test-domainurl").each(function() {  // select applicable inputs
        $(this).rules("add", {              // apply the rule to each selected input
            required: true
        });
    });

});

修好了。我应该先看一下它的文件。我将required添加到字段及其工作中。然而，我仍然不知道为什么早期的代码不起作用？任何想法都有助于理解其行为。Thanks@Krunal看起来，
规则
应该是validate原型的一个选项，并将其修复。我应该先看一下它的文件。我将required添加到字段及其工作中。然而，我仍然不知道为什么早期的代码不起作用？任何想法都有助于理解其行为。Thanks@Krunal看起来，
规则
应该是验证原型的一个选项。您未正确使用
.validate（）
方法。应该只在DOM上调用一次，以便初始化插件。当插件自动捕获按钮点击时，完全没有必要将其包装在点击处理程序中。请参阅。您未正确使用
.validate（）
方法。应该只在DOM上调用一次，以便初始化插件。当插件自动捕获按钮点击时，完全没有必要将其包装在点击处理程序中。请参阅。嗨，谢谢你的详细解释。我完全理解。并更新了你的答案，效果很好。然而，它仍然不能与IE7和IE8一起工作。我有最新版本的jQuery 1.11.1和最新的验证插件。有什么想法/建议吗？@Krunal，我知道这个插件在IE7和IE8中运行良好，因为我一直在使用它。我的猜测是，您正在IE9或IE10的“兼容性模式”中测试它。兼容性模式不是模拟器。您必须始终在真实浏览器中进行测试。MS为测试每个版本的Explorer提供免费的VPC硬盘映像。请参阅：作为一个示例。@Sparksy是的，我已经在兼容模式下对其进行了测试。我有一个单独的设置，以及，将检查它也有。我相信它会起作用的。谢谢。嗨，谢谢你的详细解释。我完全理解。并更新了你的答案，效果很好。然而，它仍然不能与IE7和IE8一起工作。我有最新版本的jQuery 1.11.1和最新的验证插件。有什么想法/建议吗？@Krunal，我知道这个插件在IE7和IE8中运行良好，因为我一直在使用它。我的猜测是，您正在IE9或IE10的“兼容性模式”中测试它。兼容性模式不是模拟器。您必须始终在真实浏览器中进行测试。MS为测试每个版本的Explorer提供免费的VPC硬盘映像。请参阅：作为一个示例。@Sparksy是的，我已经在兼容模式下对其进行了测试。我有一个单独的设置，以及，将检查它也有。我相信它会起作用的。非常感谢。