基于复选框验证按钮

Question

我正在使用 JQuery 验证库，我有一个按钮，单击该按钮时，会打开按钮旁边弹出的复选框列表。 我正在尝试做的是，如果在单击提交时未选中任何复选框，请将验证错误放在按钮上，以便将 .error 类应用于按钮，以便我可以将样式设置为按钮而不是复选框。 这基本上是我所拥有的

<button type="button" id="myButton" name="myButton"></button>
<ul id="myListOfCheckboxes">
<li><input type="checkbox" id="chk1" name="checkboxList"></li>
<li><input type="checkbox" id="chk2" name="checkboxList"></li>
<li><input type="checkbox" id="chk3" name="checkboxList"></li>
</ul>

和验证...

$("#frmMyForm").validate({
rules: {
myButton: { 
required: {
function(element) {
return $("input[name='checkboxList']").is(":checked");
}
}
}
}
});

Answer 1

将验证错误放在按钮上，以便将 .error 类应用于按钮，以便我可以将样式设置为按钮而不是复选框。

你不能直接这样做。

您绝对不能使用此插件验证button元素。 jQuery Validate 仅用于验证包含实际表单数据的元素：select、textarea、某些类型的input元素以及具有contenteditable属性的某些元素。 没有别的。

解决方法可能是验证type="hidden"input元素而不是button。 将隐藏元素放在按钮附近，以便验证消息显示在靠近所需位置的位置。 请记住在.validate()内更改ignore选项以允许此操作。

由于错误是在复选框留空时触发的，因此您实际上只是在验证复选框上的required规则！ 在这种情况下，您可以根据复选框上的错误类以编程方式将错误类应用于button。

Answer 2

使用它，因为输入标签具有 name 属性作为checkboxList而不是 id

$("#frmMyForm").validate({
rules: {
myButton: { 
required: {
function(element) {
return $("input[name='checkboxList']").is(":checked");
}
}
}
}
});