我正在使用带有alt-checkbox(http://alt-checkbox.starikovs.com/)的jquery 1.9.1来创建一组“nice”复选框。我还想确保至少选中一个复选框,以便我使用jQuery Validation插件。验证在没有alt-checkbox样式的情况下工作正常,但是当我添加样式时,验证失败。
复选框的(精简的)原始代码是:
<form id="form" name ="form">
<input type="checkbox" name="groups[]" class="checkbox" value="1">
<input type="checkbox" name="groups[]" class="checkbox" value="2">
</form>
通过以下方式添加alt-checkbox样式:
<script>
jQuery(".checkbox").altCheckbox({
});
</script>
验证通过以下方式完成:
$("#form").validate({
rules: {
'groups[]': {
required: true,
}
},
messages: {
'groups[]': "Please select at least one group"
}
});
});
</script>
alt-checkbox呈现:
<a href="#" class="alt-checkbox fontawesome-ok medium outline-unchecked"/>
<input type="checkbox" name="groups[]" id="groups[]" class="checkbox" value="1" style="display: none;"/>
<a href="#" class="alt-checkbox fontawesome-ok medium outline-unchecked checked"/>
<input type="checkbox" name="groups[]" id="groups[]" class="checkbox" value="2" style="display: none;"/>
我尝试过各种各样的方法让它工作,包括将第三个复选框中的validate =“required:true,minlength:2”添加到运气中。有什么建议吗?
答案 0 :(得分:1)
您需要做的就是允许jQuery Validate在隐藏元素上执行。它仍然适用于您的替代复选框实现:
$("#form").validate({
ignore:'',//by default it ignores hidden inputs, so setting this to blank overrides that
rules: {
'groups[]': {
required: true,
}
},
messages: {
'groups[]': "Please select at least one group"
}
});