Colocación de etiqueta de error personalizada usando jQuery validar (para todos o algunos de sus errores)

Me gustaría colocar una etiqueta de error (No todo) en una ubicación personalizada. jQuery proporciona esto http://docs.jquery.com/Plugins/Validation/validate#toptions pero no pude encontrar nada sobre cómo colocar un mensaje de error específico y no cambiar la ubicación predeterminada de todo el resto.

Asegúrese de revisar todas las respuestas a continuación. Hay múltiples soluciones a esto. ¡Gracias a todos!

Entonces, si desea que todos sus mensajes de error de jQuery Validate aparezcan en un solo lugar, usaría
http://docs.jquery.com/Plugins/Validation/validate#toptions (Buscar ubicación de error) en esa página.

Noté algunas respuestas aquí, responda una pero no ambas opciones.

1) Dicho esto, si desea una ubicación personalizada para todos sus errores, puede hacer esto:

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo('#errordiv');
   }
});

2) Si desea especificar ubicaciones específicas para una o varias etiquetas de error, puede hacerlo.

errorPlacement: function(error, element) {
    if (element.attr("name") == "email" )
        error.insertAfter(".some-class");
    else if  (element.attr("name") == "phone" )
        error.insertAfter(".some-other-class");
    else
        error.insertAfter(element);
}

En realidad, no es necesario usar ningún código javascript y descubrí una solución simple para esto. Puede obligar a jQuery Validate a colocar el error de validación en un elemento DOM.

Por ejemplo, jQuery genera un error como este:

 <label for="firstname" generated="true" class="error">This field required.</label>

Puede colocar este elemento DOM de etiqueta en su próximo td bloquear o li elemento o lo que quieras como un espacio en blanco como este.

<label for="firstname" generated="true" class="error"></label>

jQuery encontrará ese campo en blanco y colocará el mensaje de error por usted.

Solo no olvides el por campo en elemento de etiqueta!

Esta es una solución más genérica, no específica de la estructura HTML del OP.

Si solo desea una etiqueta de error en particular en una ubicación diferente mientras el resto permanece en su ubicación predeterminada, intente esto…

$("#myform").validate({
  errorPlacement: function(error, element) {
     if (element.attr("name") == "myFieldName") {

       // do whatever you need to place label where you want

         // an example
         error.insertBefore( $("#someOtherPlace") );

         // just another example
         $("#yetAnotherPlace").html( error );  

     } else {

         // the default error placement for the rest
         error.insertAfter(element);

     }
   }
});

Documentación en línea para errorPlacement: opción

Descubrí que si tiene más de dos etiquetas para errores personalizados en diferentes ubicaciones, puede haber un error de posición loco si no hace un solo retorno en cada uno si para errorPlacement, en esta muestra tengo dos casillas de verificación, etiqueta de error, uno casilla de verificación, una etiqueta

código HTML

<p><label for="owner"><input  type="checkbox" name="option[]" id="owner" value="1"  validate="required:true, minlength:2" /> I am Owner of my Company</label></p>
<p><label for="agency"><input  type="checkbox" name="option[]" id="agency" value="1" /> I am an Agency</label>
<div id="errordiv"></div></p>
<hr>
<p><label for="agree"><input type="checkbox" name="agree" id="agree" value="1" required /> I Agree and I read the Privacy Polities and Use of Terms</label>
<div id="error_agree"></div>

Guion

<script>
        $("#register_form").validate({ 
                        errorPlacement: function(error, element) {
                            if(element.attr("name") == "option[]"){
                                error.appendTo('#errordiv');
                                return;
                            }

                            if(element.attr("name") == "agree"){
                                    error.appendTo('#error_agree');
                                    return;
                            }else {
                                error.insertAfter(element);
                            }
                       }
                    });

        </script>