jquery validationプラグインforチェックボックス - 少なくとも1つが選択されました

Question

フォームフィールドの検証にjqueryバリデーションプラグインを使用しています。フォームに複数のチェックボックスがあります。私はロジックのためのいくつかの異なる方法を試してみましたが、少なくとも1つの選択が必要ですが、何も動作していませんが、このコードを使って検証プラグインから何かを試してみます。あなたが私に言うことができる場合、私は、検証プラグイン

<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ルールを宣言するだけで、自動的に少なくとも1つのチェックボックスが必要になります。

$(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 
    } 
}