Obtención de mensajes de error duplicados con el complemento de validación de JQuery

Question

No soy un novato de JQuery y del complemento Validation.

Descripción breve: Quería que todos mis mensajes de error aparezcan en un div en la parte superior del formulario, en lugar de al lado de cada etiqueta. Después de un pequeño rasguño en la cabeza y búsqueda en la red, se me ocurrió lo siguiente, que funciona, pero el mensaje sourceurl: aparece dos veces en la validación. No tengo ni idea de por qué. Cualquier ayuda sería apreciada. Cheers, John Código

Fuente:

<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

En lugar de utilizar la clase utilizar el atributo ID.
Por ejemplo <div class="message" id="errmsg"></div> y cambiar la línea Jquery en
errorPlacement: function (error, element) { error.appendTo($("#errmsg")); }

ejemplo vivo Here

Answer 2

Es porque diste la clase a la envoltura interior de su elemento de error y, por lo siguiente:

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

Debe ser solo:

wrapper: "div", 

Luego no se lo agrega al contenedor superior y los elementos que está creando allí. You can give it a try here.

---

Los trabajos anteriores, pero la mejor solución es el uso de la propiedad previsto, errorLabelContainer, que también se muestra/oculta automáticamente I hay/no hay errores, como esto:

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