jquery验证插件的复选框，至少有一个选中

Question

我正在使用jQuery验证插件进行表单字段验证。我在表单中有多个复选框。我尝试了几种不同的方式为逻辑'至少需要选择一个'，但没有任何工作，但是当我尝试验证插件的东西，它的工作正常与此代码。如果你能告诉我怎样可以验证插件

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.submit').click(function() { 
     checked = $("input[type=checkbox]:checked").length; 

     if(!checked) { 
     // <form:errors path="chk" cssClass="errors" element="div" /> 
     $(".form-error").text("* You must check at least one checkbox.").show(); 
     // alert("You must check at least one checkbox."); 
     return false; 
     } 

    }); 
}); 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> 
<script> 


    $(document).ready(function(){ 

     $("#myForm").validate({ 



     rules: { 
      crcode: "required", 
      dtype: "required", 
      pview: "required", 
      prview: "required", 


     }, 

     messages: { 
      crcode: "Rate code is required", 
      dtype: "Dwell type is required", 
      pview: "Public view is required", 
      prview: "Private view is required", 


     } 

     }); 
     }); 

    </script> 
Here are my checkboxes 
<div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;" > 
      <input type="checkbox" name="chkbox" id="fancy-checkbox-default1" autocomplete="off" class="fancy" /> 
      <div class="[ btn-group ]"> 
       <label for="fancy-checkbox-default1" class="[ btn btn-default ]"> 
        <span class="[ glyphicon glyphicon-ok ]"></span> 
        <span> </span> 
       </label> 
       <label for="fancy-checkbox-default1" class="[ btn btn-default active ]"> 
        Video+Internet 
       </label> 
      </div> 
     </div> 
<div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;"> 
      <input type="checkbox" name="chkbox" id="fancy-checkbox-default2" autocomplete="off" class="fancy" /> 
      <div class="[ btn-group ]"> 
       <label for="fancy-checkbox-default2" class="[ btn btn-default ]"> 
        <span class="[ glyphicon glyphicon-ok ]"></span> 
        <span> </span> 
       </label> 
       <label for="fancy-checkbox-default2" class="[ btn btn-default active ]"> 
        Video+Phone&nbsp;&nbsp; 
       </label> 
      </div> 
     </div> 
<div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;"> 
      <input type="checkbox" name="chkbox" id="fancy-checkbox-default3" autocomplete="off" class="fancy" /> 
      <div class="[ btn-group ]"> 
       <label for="fancy-checkbox-default3" class="[ btn btn-default ]"> 
        <span class="[ glyphicon glyphicon-ok ]"></span> 
        <span> </span> 
       </label> 
       <label for="fancy-checkbox-default3" class="[ btn btn-default active ]"> 
        Video+Security 
       </label> 
      </div> 
     </div> 

Answer 1

内将这一下面的代码，如果你能告诉我怎样才能验证插件内将这一下面的代码

$('.submit').click(function() { 
    checked = $("input[type=checkbox]:checked").length; 
    if (!checked) { .... 

你不“T。

该代码对于使用jQuery Validate插件没有任何意义，并且可以完全删除。当使用jQuery Validate插件时，您无需为复选框验证编写完全独立的函数，NOR您是否需要任何种类的点击处理程序。

您只需在复选框名称上声明required规则，插件将自动创建至少一个复选框。

$(document).ready(function(){ 

     $("#myForm").validate({ 
      rules: { 
       chkbox: "required", // <- add this 
       crcode: "required", 
       dtype: "required", 
       pview: "required", 
       prview: "required", 
      }, 
      messages: { 
       chkbox: "* You must check at least one checkbox.", // <- add this 
       crcode: "Rate code is required", 
       dtype: "Dwell type is required", 
       pview: "Public view is required", 
       prview: "Private view is required", 
      } 
     }); 

}); 

DEMO：http://jsfiddle.net/42t2twLo/

该复选框的错误信息的确切位置可以与the errorPlacement option促进。

errorPlacement: function(error, element) { 
    if (element.is(":checkbox")) { 
     error.insertBefore(element); // custom placement example 
    } else { 
     error.insertAfter(element); // default placement 
    } 
}