我在使用 jQuery validator.addMethod 根据类名而不是名称来验证复选框时遇到问题。
看一下这个并告诉我为什么该脚本在放置在 html 内的脚本标记内时不起作用。
代码在这里:http://jsbin.com/ecozih/2
如果将脚本移至 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>
谢谢
最佳答案
您忘记将 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 Pane 内的代码都会等待 DOM 加载，然后才会被触发。
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 使用类名验证复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13380479/