Question

我无法使用jQuery validator.addMethod来验证基于类名而不是名称的复选框。

看看这个并告诉我为什么脚本放在html中的脚本标签内时不起作用。

如果您将脚本移动到JS bin上的JavaScript窗口，它就可以工作。

如果有更简单的方法，请告诉我。一个例子将不胜感激。

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

谢谢

Answer 1

您忘记将jQuery代码包装在document.ready中。换句话说，你的jQuery试图在元素构造之前选择元素。 document.ready解决了这个问题。由于在调用代码时form尚不存在，document.ready仅在HTML DOM准备就绪时触发。

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

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

引用：“如果您将脚本移动到JS bin上的JavaScript窗口，它就能正常工作。”

那是因为，无论你是否使用document.ready，jsBin和jsFiddle的JavaScript窗格内的代码都会在被触发之前等待DOM加载。

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

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 个答案: