Doppelte Fehlermeldungen mit JQuery Validierungs-Plugin erhalten

Question

Ich bin ein Neuling für JQuery und das Validierungs-Plugin.

Kurzbeschreibung: Ich wollte, dass alle meine Fehlermeldungen in einem div am oberen Rand des Formulars statt neben jedem Etikett angezeigt werden. Nach ein wenig Kopfkratzen und Netzsuche, kam ich auf folgendes, was funktioniert, aber die sourceurl: -Nachricht kommt bei der Validierung zweimal auf. Ich habe keine Ahnung, warum. Jede Hilfe wäre willkommen. Cheers, 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

Statt die Klasse mit dem ID-Attribut verwenden.
Zum Beispiel <div class="message" id="errmsg"></div> und die JQuery Linie errorPlacement: function (error, element) { error.appendTo($("#errmsg")); }

Live-Beispiel in
Here

Answer 2

Es ist, weil Sie die Klasse an den Wrapper in Ihrem Fehlerelement als auch gaben, so dass dies ändern:

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

Sollte nur sein:

wrapper: "div", 

Dann hängt es nicht an den oberen Container und die Elemente an, die es dort innen schafft. You can give it a try here.

---

Die oben genannten Arbeiten, aber eine bessere Lösung ist, um die beabsichtigte Eigenschaft zu verwenden, errorLabelContainer, die ich ein-/ausgeblendet wird auch automatisch gibt es/sind keine Fehler, wie folgt aus:

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