Nhận thông báo lỗi trùng lặp với Plugin xác thực JQuery

Question

Tôi là người mới sử dụng JQuery và plugin Xác thực.

Mô tả ngắn: Tôi muốn tất cả các thông báo lỗi của tôi xuất hiện trong một div ở đầu biểu mẫu, thay vì bên cạnh mỗi nhãn. Sau một chút gãi đầu và tìm kiếm trên net, tôi đã đưa ra những điều sau đây, nó hoạt động, nhưng thông tin nguồn: thông điệp xuất hiện hai lần khi xác thực. Tôi không biết tại sao. Bất kỳ trợ giúp sẽ được đánh giá cao. Chúc mừng, John

Source Code:

<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

Thay vì sử dụng các lớp học sử dụng thuộc tính ID.
Ví dụ <div class="message" id="errmsg"></div> và thay đổi dòng Jquery vào
errorPlacement: function (error, element) { error.appendTo($("#errmsg")); }

Sống dụ Here

Answer 2

Đó là vì bạn đã cho các lớp học để các wrapper bên trong phần tử lỗi của bạn là tốt, vì vậy đây:

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

Phải là:

wrapper: "div", 

Sau đó, nó sẽ không thêm nó vào vùng chứa hàng đầu và các yếu tố tạo ra bên trong đó. You can give it a try here.

---

Các công trình trên, nhưng một giải pháp tốt hơn là sử dụng các tài sản dự định, errorLabelContainer, mà cũng được hiển thị/ẩn tự động i có/không có bất kỳ sai sót, như thế này:

$(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.