jqueryのvalidateプラグインが自分のチェックボックスを有効にしていないのはなぜですか？

Question

このコードは別のファイルからコピーされ、そのファイルで動作します。変数とフォームIDをチェックして、名前がjsコードと一貫していることを確認しています。 genFromのテキストボックスも有効ですが、チェックボックスだけが機能しません。

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#genForm").validate(); 
    $("#genForm").validate({ 
     rules: { 
      agree: { 
       required: true 
      } 
     } 
    }) 
}); 
</script> 

<form id="genForm" method="post" action="verify.php"> 
<div class="container"> 
    <div class="hero-unit"> 
     <h1>Subscribe for final</h1> 
    </div> 
    <div class="clearfix"> 
     <label>Email</label> 
     <div class="input"> 
      <input name="Email" type="text" class='required'> 
     </div> 
    </div> 
    <br> 
    <br> 
    <div class="clearfix"> 
    <label>Agreements:</label> 
     <div class="input"> 
     <ul class="inputs-list"> 
      <li>          
      I accept the terms and conditions. 
      <!-- Check box is here, not working --> 
      <input type="checkbox" name="agree" value="1"> 
      </li> 
     </ul> 
     </div> 
    </div> 
    <br> 
    <input class="btn primary" type="submit" value="Submit"> 
</form> 

Answer 1

何らかの理由で、あなたが同じフォーム上に二回validate()を呼んでいる、あなただけのいずれかが必要：

// $("#genForm").validate(); No need for this 

$("#genForm").validate({ 
    rules: { 
     agree: { 
      required: true 
     } 
    } 
}); 

はデモ：http://jsfiddle.net/8MV5F/

が無いとvalidate()を呼び出しますparamsにはいくつかの（設定可能な）デフォルト動作があり、そのうちの1つはrequiredのルールをclass='required'の要素に適用すると、電子メールフィールドが機能していたのです。 required属性を使用することもできます。さらに、type="email"を使用して、ルールに指定することなくメールアドレスとして検証することができます。

は簡単な例です：http://jsfiddle.net/8MV5F/2/

<form id="genForm" method="post" action="verify.php"> 
    <label>Email:<input name="Email" type="email" required></label>   
    <label>I accept the terms and conditions. 
    <input type="checkbox" name="agree" value="1" required></label> 
    <input class="btn primary" type="submit" value="Submit"> 
</form> 

$("#genForm").validate(); 

これはサポートされている場合無効、あるいは単に壊れているJavaScriptの場合には、ネイティブブラウザの検証にフォールバックするという利点があります。