JQuery validator.addMethod 使用类名验证复选框

Question

I am having trouble using jQuery validator.addMethod to validate check boxes based on class names as opposed to names.我在使用 jQuery validator.addMethod 来验证基于类名而不是名称的复选框时遇到问题。

Take a look at this and tell me why the script doesn't work when placed within script tags inside the html.看看这个并告诉我为什么脚本在放置在 html 内的脚本标签中时不起作用。

The code is here: http://jsbin.com/ecozih/2代码在这里： http : //jsbin.com/ecozih/2

If you move the script over to the JavaScript window on JS bin it works.如果您将脚本移到 JS bin 上的 JavaScript 窗口，它就可以工作。

If there is a easier way to do this, please let me know.如果有更简单的方法可以做到这一点，请告诉我。 An example would be greatly appreciated.一个例子将不胜感激。

<html>
  <head>
<script src="hxxp://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="hxxp://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

  </head>
<body>
<script>
$.validator.addMethod('interests', function (value) {
return $('.interests:checked').size() > 0; }, 'Pick one or more');
var checkboxes = $('.interests');
var checkbox_names = $.map(checkboxes, function(e,i) { return $(e).attr("name")}).join(" ");
$("#subscribeForm").validate({
    groups: { checks: checkbox_names },
    errorPlacement: function(error, element) {
             if (element.attr("type") == "checkbox")
               error.insertAfter(checkboxes.last());
             else
               error.insertAfter(element);
}
});
</script>
<form name="subscribeForm" id="subscribeForm" method="post">
<input type="checkbox" class="interests" value="1" name="group[1357][1]" ><label>Bananas</label>
<input type="checkbox" class="interests" value="2" name="group[1357][2]"><label>Oranges</label>
<input type="checkbox" class="interests" value="4" name="group[1357][4]"><label>Apples</label><br />
<label for="checks" generated="true" class="error" style=""></label><br />
<input type="submit" />
</form>
  </body>

Thank you谢谢

Answer 1

You forgot to wrap your jQuery code within a document.ready .您忘记将 jQuery 代码包装在document.ready 。 In other words, your jQuery is trying to select elements before the elements have even been constructed.换句话说，您的 jQuery 试图在元素构建之前选择元素。 The document.ready fixes this. document.ready解决了这个问题。 Since the form does not yet exist when the code is called, the document.ready only fires off when the HTML DOM is ready.由于调用代码时form尚不存在，因此document.ready仅在 HTML DOM 准备就绪时触发。

jsFiddle Demo: http://jsfiddle.net/TCHYJ/ jsFiddle 演示： http : //jsfiddle.net/TCHYJ/

and your jsBin: http://jsbin.com/ecozih/4/edit和你的 jsBin： http ://jsbin.com/ecozih/4/edit

Quote : "If you move the script over to the JavaScript window on JS bin it works."引用： “如果您将脚本移到 JS bin 上的 JavaScript 窗口，它就可以工作。”

That's because, code inside the JavaScript panes of jsBin and jsFiddle wait for the DOM to load before being fired whether you use the document.ready or not.这是因为，无论您是否使用document.ready ，jsBin 和 jsFiddle 的 JavaScript 窗格内的代码都会等待 DOM 加载，然后才会被触发。

http://jsfiddle.net/TCHYJ/1/ http://jsfiddle.net/TCHYJ/1/

http://jsbin.com/ecozih/6/edit http://jsbin.com/ecozih/6/edit

<script>
    $(document).ready(function() {

        $.validator.addMethod('interests', function(value) {
            return $('.interests:checked').size() > 0;
        }, 'Pick one or more');
        var checkboxes = $('.interests');
        var checkbox_names = $.map(checkboxes, function(e, i) {
            return $(e).attr("name")
        }).join(" ");

        $("#subscribeForm").validate({
            groups: {
                checks: checkbox_names
            },
            errorPlacement: function(error, element) {
                if (element.attr("type") == "checkbox") error.insertAfter(checkboxes.last());
                else error.insertAfter(element);
            }
        });

    });
</script>

JQuery validator.addMethod 使用类名验证复选框

问题描述

1 个解决方案

解决方案1
2 已采纳 2012-11-14 14:42:16

JQuery validator.addMethod 使用类名验证复选框

问题描述

1 个解决方案

解决方案1 2 已采纳 2012-11-14 14:42:16

解决方案1
2 已采纳 2012-11-14 14:42:16