爲什麼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確實有一些（可配置的）默認行爲，其中之一是附加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，甚至剛剛打破的優勢。