使用JQuery驗證插件獲取重複錯誤消息

Question

我是JQuery和驗證插件的新手。

簡要說明：我希望所有的錯誤消息都出現在表單頂部的一個div中，而不是每個標籤旁邊。經過一點頭部劃痕和網絡搜索之後，我想出了以下內容，這很有效，但sourceurl：消息在驗證中出現了兩次。我不知道爲什麼。任何幫助，將不勝感激。

<form name="siteauth" id="siteauth" action="savedata" type="POST"> 
    <div class="message"></div> 
    <fieldset> 
     <label>Short Description:</label> 
     <br><input id="shortdescription" size="75" type="text" maxlength="50" name="shortdescription"/> 
     <br><label>Source URL:</label> 
     <br><input id ="sourceurl" size="75" type="text" maxlength="500" name="sourceurl"/> 
     <br><label>Callback URL:</label> 
     <br><input id="callbackurl" size="75" type="text" maxlength="500" name="callbackurl"/> 
     <br><label>Callback Content:</label> 
     <br><input id="in4" size="75" type="text" maxlength="100" name="callbackcontent"/> 
     <br> 
     <br><input type="submit" value="Add"/> 
    </fieldset> 
</form> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 


<script> 

    $(document).ready(function(){ 
     $("#siteauth").validate({ 
      rules: { 
       shortdescription: "required", 
       sourceurl: "required" 
      }, 
      messages: { 
       shortdescription: "Enter a short description. ", 
       sourceurl: "Enter a Source URL. " 
      }, 
      errorElement: "div", 
      wrapper: "div class=\"message\"", 
      errorPlacement: function (error, element){ 
       error.appendTo($(".message")); 
      } 
     }); 

    }); 

Answer 1

使用類使用ID屬性代替： 乾杯， 約翰

源代碼。
例如 <div class="message" id="errmsg"></div>並更改Jquery的行成
errorPlacement: function (error, element) { error.appendTo($("#errmsg")); }

活生生的例子Here

Answer 2

這是因爲你給全班同學的錯誤元素中的包裝一樣，所以這樣的：

wrapper: "div class=\"message\"", 

應該只是：

wrapper: "div", 

然後它不會將它附加到頂部容器和它在裏面創建的元素。 You can give it a try here。

---

上述工作，但更好的方法是沒有任何錯誤使用預定屬性，errorLabelContainer，其也示出/自動隱藏我有/，這樣的：

$(function(){ 
    $("#siteauth").validate({ 
     rules: { 
      shortdescription: "required", 
      sourceurl: "required" 
     }, 
     messages: { 
      shortdescription: "Enter a short description. ", 
      sourceurl: "Enter a Source URL. " 
     }, 
     errorElement: "div", 
     wrapper: "div", 
     errorLabelContainer: ".message" 
    }); 
});​ 

Give that version a try here。