为什么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，甚至刚刚打破的优势。