为什么只验证第一个表单

Why only first form is validated?

本文关键字：表单 第一个 验证 为什么      更新时间：2023-09-26

请参阅下面的fiddle。

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

http://jsfiddle.net/vak87/

我不知道为什么只有第一个表格是有效的？

有什么想法和建议吗？

感谢

您应该在css选择器中使用$(this)，并使用parent()和siblings('.test-domainurl')来查找与每个按钮对应的元素。

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

jsFiddle示例

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

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

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

我从未使用过验证插件，但我的猜测是选择器仅限于插件中的第一个匹配项。如果你单独添加规则，它似乎是有效的。

示例：

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
            });
        });
    });
});
相关文章：