Obtention de messages d'erreur en double avec le plugin JQuery Validation

Question

Je suis un novice de JQuery et du plugin Validation.

Courte description: Je voulais que tous mes messages d'erreur apparaissent dans une div en haut du formulaire, et non à côté de chaque étiquette. Après une petite égratignure de tête et une recherche de filets, je suis arrivé avec ce qui suit, qui fonctionne, mais le sourceurl: message revient deux fois sur la validation. Je n'ai pas la moindre idée de pourquoi. Toute aide serait appréciée. Cheers, John

Code Source:

<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

Au lieu d'utiliser la classe utiliser l'attribut ID.
Par exemple <div class="message" id="errmsg"></div> et changer la ligne Jquery dans
errorPlacement: function (error, element) { error.appendTo($("#errmsg")); }

exemple en direct Here

Answer 2

C'est parce que vous avez donné la classe à l'emballage dans votre élément d'erreur, donc ceci:

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

Devrait être juste:

wrapper: "div", 

Ensuite, il n'est pas ajouté au conteneur supérieur et les éléments qu'il crée à l'intérieur. You can give it a try here.

---

Les travaux ci-dessus, mais une meilleure solution est d'utiliser la propriété prévu, errorLabelContainer, qui est i il y a aussi montré/caché automatiquement/ne sont pas des erreurs, comme ceci:

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