使用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。