jQuery Validación muestra errores como línea por defecto, es necesario cambiar este a inline-block

estoy usando el jQuery Validation Plugin jQuery Validación muestra errores como línea por defecto, es necesario cambiar este a inline-block

¿Cómo cambio los mensajes de error generados display valor a inline-block cuando no se oculta?

Lo he intentado con CSS, pero el jQuery sobrescribe esto.

Fuente

2012-04-17 Clinton Green

¿Dónde está su código? ¿Que has hecho hasta ahora? – Sparky

Hola, desafortunadamente este es un proyecto interno, así que no puedo dirigirlo a un enlace. Estoy tratando de encontrar dónde el jquery le dice al código que agregue la pantalla: en línea con la etiqueta de error cuando se muestra, y cambie eso para mostrar: inline-block –

No le pedí que publicara un enlace. Sin embargo, simplemente busque dentro del complemento y personalice según sea necesario ... solo jQuery/JavaScript. – Sparky

Utilice la opción errorClass para especificar la clase asignada a mensajes de error y los elementos de error:

$(".selector").validate({ 
    errorClass: "invalid" 
}) 

<style type="text/css"> 
    .invalid { 
    display: inline-block !important; 
    } 
</style>

Consulte la documentación de las opciones del validador:

http://docs.jquery.com/Plugins/Validation/validate#options

Fuente

2012-04-17 23:22:03 leepowers

Con esto, es imposible ocultar los errores una vez que el campo es válido – jetlej

De acuerdo con @jetlej, esto rompe la funcionalidad de validación como la pantalla: ninguna generada por el complemento para ocultar el mensaje de error de validación innecesaria ya no se tiene en cuenta debido a! importante. –

Si utiliza !important en su CSS, debe prevalecer sobre lo que hace jQuery:

.error { 
    display: inline-block !important; 
}

Fuente

2012-04-17 23:21:04

Gracias, lo intenté, pero no funcionó –

Hmm, funciona para mí ... ¿Has buscado Firebug u otro depurador para ver qué estilo se aplica y qué es haciendo que el 'inline-block' no se aplique? –

El estilo en línea del complemento sobrescribe el CSS –

jQuery validate no tiene ningún estilo CSS definido. ¿Estás utilizando otras bibliotecas con definiciones CSS para la clase "error"?

Aquí es código de ejemplo jsFiddle con jQuery validar el uso de inline-block para el mensaje de error:

http://jsfiddle.net/maxim75/HKnQD/4/

.error 
{ 
    color: Red; 
    display: inline-block; 
}

abrirlo y comprobar en su navegador:

enter image description here

Fuente

2012-04-18 00:38:03

Hola, gracias, me di cuenta de esto ayer cuando probé las respuestas que recibí. Saludos –

Me encontré con esto y no pude usar CSS ya que jQuery usa los métodos show() y hide() en el elemento de error (que establecer "display: block;" inline) después de la creación inicial. En su lugar, puede usar los métodos de validación y desmarcación del complemento validar para cambiar el CSS en línea.

errorElement: 'em', 

highlight: function(element, errorClass) { 
    $(element).addClass(errorClass); // good for changing field backgrounds 
    $(element).next('em').css('display','inline'); // keeps error message layout clean 
}, 

unhighlight: function(element, errorClass) { 
     $(element).removeClass(errorClass); // good for changing field backgrounds 
     $(element).next('em').css('display','none'); // keeps error message layout clean 
},

Fuente

2013-01-28 21:50:55 matlembo

Gracias amigo. Cheers –

Esta es la respuesta correcta – hamishtaplin

jQuery Validación muestra errores como línea por defecto, es necesario cambiar este a inline-block

Respuesta

Cuestiones relacionadas