Question

请参考以下小提琴。

<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/

我不确定为什么只有第一个表单被验证？

有任何想法和建议吗？

由于

Answer 1

您应该在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 example

Answer 2

关于您的代码不适用于IE7和IE8的评论......

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

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

Answer 3

我从未使用过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
            });
        });
    });
});

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

3 个答案: