为什么只有第一种形式被验证？

请参阅以下小提琴。为什么只有第一种形式被验证？

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

我不知道为什么只有第一种形式是验证？

任何想法和建议？

感谢

来源

2013-08-06 Krunal

你不恰当地使用了'.validate（）'方法。它只能在DOM上调用_once_来准备初始化插件。当按钮点击被插件自动捕获时，绝对不需要将其封装在点击处理程序中。请参考[本网站上的jquery-validate wiki页面]（http://stackoverflow.com/tags/jquery-validate/info）。 – Sparky

您应的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

来源

2013-08-06 15:21:12 matth

这太棒了！它工作正常。 – Krunal

任何想法，为什么它不能在IE7和IE8中工作？ – Krunal

我从来没有使用验证插件，但我的猜测是，选择被限制在插件中的第一场比赛。如果你单独添加规则，它似乎工作。

实施例：

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

来源

2013-08-06 15:11:50 James

修好了。我应该首先参考它的文档。我加入了该领域及其工作。但是，我仍然不确定为什么早期的代码不起作用？任何想法都会有助于理解它的行为。谢谢 – Krunal

@Krunal它看起来像'规则'应该是验证原型的选项 –

关于你对你的代码在IE7和IE8不工作评论...

1）你绝对不需要一个click事件处理程序中包围.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 
     }); 
    }); 

});

来源

2013-08-06 18:08:44 Sparky

嗨，谢谢你的详细解释。我理解得当。并且还更新了你的答案，它工作正常。但是，它仍然不适用于IE 7和IE8。我有最新版本的jQuery 1.11.1和最新的验证插件。任何想法/建议？ – Krunal

@Krunal，我知道这个插件在IE7和IE8中工作正常，因为我一直都在使用它。我的猜测是你在“兼容模式”下在IE9或10中测试它。兼容模式不是模拟器。您必须始终在真实的浏览器中进行测试。MS提供免费的VPC硬盘驱动器映像以测试每个版本的资源管理器。请参阅：http://www.microsoft.com/en-us/download/details.aspx?id=11575作为一个示例。 – Sparky

@Sparksy是的，我已经在兼容模式下测试过它。我也有一个单独的设置，也会在那里检查它。我相信它会起作用。谢谢。 – Krunal

为什么只有第一种形式被验证？

回答

相关问题