結合.toggle（）和表單驗證

Question

我有我驗證使用這個插件形式：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

我決定將字段添加到這個形式，如果一個鏈接被點擊，使用.toggle()將出現。

這裏是形式：

<form id="identification" action="Test.php" method="post"> 
    <fieldset> 
     <legend>Identification</legend> 
     <p> 
      <label for="firstName">First name</label> 
      <input id="firstName" type="text" name="firstName" class="required"/> 
     </p> 
     <p> 
      <label for="lastName">Last name</label> 
      <input id="lastName" type="text" name="lastName" class="required"/> 
     </p> 
     <p> 
      <label for="email">E-mail address</label> 
      <input id="email" type="text" name="email" class="required email"/> 
     </p> 
     <div class="hiddenFields"> 
      <p> 
       <label for="zip">Zip code</label> 
       <input id="zip" type="text" name="zip" class="required zip"/> 
      </p> 
      <p> 
       <label for="city">City</label> 
       <input id="city" type="text" name="city" class="required"/> 
      </p>   
     </div> 
     <p class="showFields"><a class="toggle" href="#">Click here</a> for more info</p> 
    </fieldset> 
    <p class="submit"><input type="submit" value="Submit"/></p> 
</form> 

的.hiddenFields格設置爲我的CSS display: none;。

這裏是驗證腳本：

$(document).ready(function(){ 
    $("#identification").validate({ 
     rules: { 
       "zip": { digits:true, minlength:5, maxlength:5 } 
     } 
    }); 

    jQuery.extend(jQuery.validator.messages, { 
     required: "This field is needed.", 
     email: "Please enter a valid e-mail address.", 
     digits,minlength,maxlength: "Please enter a valid zip code.", 
     minlength: "Please enter a valid zip code.", 
     maxlength: "Please enter a valid zip code." 
    }); 
}); 

這裏是切換腳本：

$(document).ready(function(){ 
    $("a.toggle").click(function(e){ 
     e.preventDefault(); 
     $(".hiddenFields").toggle("fast"); 
    }); 
}); 

現在，一切工作正常，而不.hiddenFields股利和無.toggle()，但是當我嘗試添加它，驗證不再有效，我不明白爲什麼。

當隱藏字段和不隱藏字段時，如何驗證此表單？它目前在這兩種情況下都不起作用。

感謝您的幫助。

Answer 1

Here it is on jsFiddle。

你有一個流氓digits,minlength,導致語法錯誤：

jQuery.extend(jQuery.validator.messages, { 
    required: "This field is needed.", 
    email: "Please enter a valid e-mail address.", 
    digits,minlength,maxlength: "Please enter a valid zip code.", 
    minlength: "Please enter a valid zip code.", 
    maxlength: "Please enter a valid zip code." 
}); 

你也有得到maxlength兩次。

它更改爲這將解決它：

jQuery.extend(jQuery.validator.messages, { 
    required: "This field is needed.", 
    email: "Please enter a valid e-mail address.", 
    minlength: "Please enter a valid zip code.", 
    maxlength: "Please enter a valid zip code." 
});