使用alt-checkbox进行jQuery复选框验证

时间:2013-05-29 19:32:07

标签: jquery validation checkbox

我正在使用带有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”添加到运气中。有什么建议吗?

1 个答案:

答案 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"    
      }         
});