Cómo se muestra como elemento de error etiqueta con jquery.validation complemento

Question

Bueno chicos,

He leído a través de todos los demás puestos y pregunta sobre jQuery Validación plugin y que no parecen tener lo que estoy buscando que hacer.

Me gustaría que el error de visualización no se muestre con el mensaje, sino que simplemente cree un borde rojo alrededor del campo de entrada.

aquí es sólo un poco de la forma:

<form id="donate_form" name="checkoutForm" method="post"> 
    <label class="desc" id="title0" for="billing_name_first"> 
    Name 
    <span id="req_1" class="req">*</span> 
</label> 
<div> 
    <span class="left"> 
     <input name="billing.name.first" id="billing_name_first" type="text" class="field text required" value="" tabindex="1" /> 
     <label for="billing_name_first">First</label> 
    </span> 
    <span class="right"> 
     <input name="billing.name.last" id="billing_name_last" type="text" class="field text required" value="" tabindex="2" /> 
     <label for="billing_name_last">Last</label> 
    </span> 
</div> 

Estoy asumiendo que necesito para colocar la clase requerida en la entrada ??

Luego, con CSS, oculte el label.error que se escupe por el plugin? Lo he intentado pero no voy.

¿Estoy buscando en el lugar correcto?

Gracias!

Answer 1

Entiendo lo que está tratando de lograr; Tenía los mismos requisitos pero tenía serias dificultades para tratar de lograrlo, pero lo hice. He aquí cómo:

1. he creado dos clases de estilos CSS "errorHighlight" y "TextInput", así:

   .errorHighlight { border: 2px solid #CC0000; } .textinput {border: 1px silver solid;}

2. En tiempo de diseño, que aplica la clase "entrada de texto" a mis campos de entrada de texto: <input type="text" class="textinput" />

3. Y luego en mi jQuery complementos de validación de formularios dentro de mi archivo Javascript, agregué el siguiente ala configuración de validación general para todos los formularios de esta página:

    $.validator.setDefaults({ 
         errorPlacement: function(error, element) { 
          $(element).attr({"title": error.text()}); 
         }, 
         highlight: function(element){ 
          //$(element).css({"border": "2px solid #CC0000"}); 
          $(element).removeClass("textinput"); 
          $(element).addClass("errorHighlight"); 
         }, 
         unhighlight: function(element){ 
          //$(element).css({"border": "2px solid #CC0000"}); 
          $(element).removeClass("errorHighlight"); 
          $(element).addClass("textinput"); 
         } 
        }); 
   

Ahora, cada vez que un campo no pasa la validación, la función "highlight" devolución de llamada en el elemento. La función de devolución de llamada "errorPlacement" evita la acción predeterminada de insertar una etiqueta después del campo de entrada erróneo, en su lugar agrega el mensaje de error al atributo "title" del campo (que puede usarse como fuente de texto para la visualización de información sobre herramientas) .

Espero que esto ayude.

Answer 2

No sé si esta es la forma correcta de hacerlo, pero nosotros usamos:

jQuery.validator.messages.required = ''; 

que suprime los mensajes de error y deja la frontera de entrada.

En realidad, los jQuery Plugin puntos de documentación a un ejemplo que hace esto, por lo que supongo que es el método aceptado ..

personalizada pantalla de mensajes: No hay mensajes mostrados por el método requerido, solamente para el tipo-errors (como el formato de correo electrónico equivocado); Se muestra un resumen en la parte superior ("Perdió 12 campos. Se han resaltado a continuación.")

Answer 3

Todas estas soluciones parecen ser más complicadas de lo que deben ser. Aquí hay una solución simple. .error se agrega a los campos no válidos de forma predeterminada. Por lo tanto, lo primero que tenemos que hacer es el estilo que lo que cambia el borde y el fondo a diferentes tonos de rojo:

.error { 
    border-color: #cd0a0a !important; 
    background: #fef1ec !important; 
} 

Luego, en su JavaScript:

$(function() { 
    $("#donate_form").validate({ 
     errorPlacement: $.noop 
    }); 
}); 

La opción errorPlacement es como el El complemento validar le permite anular cómo se coloca el mensaje de error. En este caso, simplemente hacemos que no haga nada y, por lo tanto, no se crea ningún mensaje de error.

Answer 4

Puede extraer sólo el mensaje de error en errorPlacement: y añadirlo a lo que quiera, como esto:

errorPlacement: function(error, element) { 
    $('#error-div').html(error[0].innerHTML)//<-error[0].innerHTML is the error msg. 
} 

Answer 5

Probar:

$(function() { 
    $("#donate_form").validate({ 
     errorPlacement: $.noop 
    }); 
});