Mario, miembro de nuestro equipo, nos ha hecho el favor de redactar esta reseña porque domina perfectamente el tema.
Solución:
Puede usar la opción errorPlacement para anular la visualización del mensaje de error con poco css. Porque css por sí solo no será suficiente para producir el efecto que necesita.
$(document).ready(function()
$("#myForm").validate(
rules:
"elem.1":
required: true,
digits: true
,
"elem.2":
required: true
,
errorElement: "div",
wrapper: "div", // a wrapper around the error message
errorPlacement: function(error, element)
offset = element.offset();
error.insertBefore(element)
error.addClass('message'); // add a class to the wrapper
error.css('position', 'absolute');
error.css('left', offset.left + element.outerWidth());
error.css('top', offset.top);
);
);
Puedes jugar con el css izquierdo y superior. attributes para mostrar el mensaje de error en la parte superior, izquierda, derecha o inferior del elemento. Por ejemplo, para mostrar el error en la parte superior:
errorPlacement: function(error, element)
element.before(error);
offset = element.offset();
error.css('left', offset.left);
error.css('top', offset.top - element.outerHeight());
Y así. Puede consultar la documentación de jQuery sobre css para obtener más opciones.
Aquí está el css que usé. El resultado se ve exactamente como el que desea. Con la menor cantidad de CSS posible:
div.message
background: transparent url(msg_arrow.gif) no-repeat scroll left center;
padding-left: 7px;
div.error
background-color:#F3E6E6;
border-color: #924949;
border-style: solid solid solid none;
border-width: 2px;
padding: 5px;
Y aquí está la imagen de fondo que necesita:
(fuente: scriptiny.com)
Si desea que el mensaje de error se muestre después de un grupo de opciones o campos. Luego, agrupe todos esos elementos dentro de un contenedor, un ‘div’ o un ‘fieldset’. Agregue una clase especial a todos ellos ‘grupo’, por ejemplo. Y agregue lo siguiente al comienzo de la función errorPlacement:
errorPlacement: function(error, element) {
if (element.hasClass('group'))
element = element.parent();
...// continue as previously explained
Si solo desea manejar casos específicos, puede usar attr en su lugar:
if (element.attr('type') == 'radio')
element = element.parent();
Eso debería ser suficiente para que el mensaje de error se muestre junto al elemento principal.
Es posible que deba cambiar el ancho del elemento principal para que sea inferior al 100 %.
He probado tu código y me funciona perfectamente. Aquí hay una vista previa:
Acabo de hacer un ajuste muy pequeño en el relleno del mensaje para que encaje en la línea:
div.error
padding: 2px 5px;
Puede cambiar esos números para aumentar/disminuir el relleno en la parte superior/inferior o izquierda/derecha. También puede agregar una altura y un ancho al mensaje de error. Si aún tiene problemas, intente reemplazar el intervalo con un div
Y luego dale un ancho al contenedor (esto es muy importante)
div.group
width: 50px; /* or any other value */
Sobre la página en blanco. Como dije, probé tu código y me funciona. Puede ser que otra cosa en su código esté causando el problema.
Yo uso jQuery BeautyTips para lograr el efecto de la pequeña burbuja del que hablas. No uso el complemento de Validación, por lo que realmente no puedo ayudar mucho allí, pero es muy fácil diseñar y mostrar los Consejos de belleza. Deberías investigarlo. Me temo que no es tan simple como solo las reglas de CSS, ya que necesita usar el elemento canvas e incluir un archivo javascript adicional para que IE juegue bien con él.
Unas pocas cosas:
En primer lugar, no creo que realmente necesite un error de validación para un conjunto de campos de radio porque podría tener uno de los campos marcado de forma predeterminada. La mayoría de la gente prefiere corregir algo que proporcionar algo. Por ejemplo:
Age: (*) 12 - 18 | () 19 - 30 | 31 - 50
es más probable que se cambie a la respuesta correcta ya que la persona NO quiere que vaya a la respuesta predeterminada. Si lo ven en blanco, es más probable que piensen “no es asunto tuyo” y lo salten.
En segundo lugar, pude obtener el efecto que creo que desea sin ninguna propiedad de posicionamiento. Simplemente agregue padding-right al formulario (o el div del formulario, lo que sea) para proporcionar suficiente espacio para su error y asegurarse de que su error encaje en esa área. Luego, tiene una clase css preestablecida llamada “error” y la configura para que tenga un margen superior negativo aproximadamente la altura de su campo de entrada y un margen izquierdo sobre la distancia desde la izquierda hasta donde su relleno derecho debería empezar. Probé esto, no es genial, pero funciona con tres propiedades y no requiere flotantes ni absolutos: