jQuery anula la visualización de mensajes de error de validación por defecto (Css) Popup / Tooltip like

Estoy tratando de sobrepasar la etiqueta del mensaje de error predeterminado con un div en lugar de una etiqueta. También he consultado esta publicación y cómo hacerlo, pero mis limitaciones con CSS me inquietan. ¿Cómo puedo mostrar esto como algunos de estos ejemplos?

Ejemplo n. ° 1 (Dojo) : debe escribir una entrada no válida para ver el error
Ejemplo n. ° 2

Aquí hay un código de ejemplo que anula la etiqueta de error a un elemento div

$(document).ready(function(){ $("#myForm").validate({ rules: { "elem.1": { required: true, digits: true }, "elem.2": { required: true } }, errorElement: "div" }); }); 

Ahora estoy perdido en la parte css, pero aquí está:

 div.error { position:absolute; margin-top:-21px; margin-left:150px; border:2px solid #C0C097; background-color:#fff; color:white; padding:3px; text-align:left; z-index:1; color:#333333; font:100% arial,helvetica,clean,sans-serif; font-size:15px; font-weight:bold; } 

ACTUALIZAR:

Bien, estoy usando este código ahora, pero la imagen y la ubicación en la ventana emergente son más grandes que el borde, ¿se puede ajustar para que sea dynamic? ¿Es alto?

 if (element.attr('type') == 'radio' || element.attr('type') == 'checkbox') { element = element.parent(); 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 - (element.height() / 2)); // Not working for Radio, displays towards the bottom of the element. also need to test with checkbox } else { // Error placement for single elements 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 - (element.height() / 2)); } 

el css es el mismo de abajo (tu código CSS)

Html

       

    Puede usar la opción errorPlacement para anular la visualización del mensaje de error con poco css. Porque el 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); } }); }); 

    Puede jugar con los atributos css izquierdo y superior para mostrar el mensaje de error en la parte superior, izquierda, derecha o en la parte 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 el mínimo 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 necesitas:

    texto alternativo http://sandbox.scriptiny.com/messages/images/msg_arrow.gif

    Si desea que se muestre el mensaje de error después de un grupo de opciones o campos. Luego, agrupe todos los elementos dentro de un contenedor a ‘div’ o ‘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 al lado del elemento principal.

    Es posible que necesite cambiar el ancho del elemento principal para que sea inferior al 100%.


    He intentado tu código y está funcionando perfectamente bien para mí. Aquí hay una vista previa: texto alternativo

    Acabo de hacer un pequeño ajuste en el relleno del mensaje para que encaje en la línea:

     div.error { padding: 2px 5px; } 

    Puede cambiar esos números para boost / disminuir el relleno en la parte superior / inferior o izquierda / derecha. También puede agregar un alto y un ancho al mensaje de error. Si todavía tiene problemas, intente reemplazar el lapso con un div

     

    Y luego dale al contenedor un ancho (esto es muy importante)

     div.group { width: 50px; /* or any other value */ } 

    Acerca de la página en blanco. Como dije, probé tu código y está funcionando para mí. Puede ser que haya algo más en tu código que esté causando el problema.

    Yo uso jQuery BeautyTips para lograr el pequeño efecto de burbuja del que estás hablando. No uso el complemento de Validación, así que no puedo ayudar mucho allí, pero es muy fácil de diseñar y mostrar los Consejos de Belleza. Deberías mirarlo. No es tan simple como las reglas de CSS, me temo, 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 fieldset de radio porque podría simplemente tener uno de los campos marcados por defecto. La mayoría de las personas prefiere corregir algo y luego 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 pase a la configuración predeterminada. Si lo ven en blanco, es más probable que piensen que “no es de su incumbencia” y omítanlo.

    En segundo lugar, pude obtener el efecto que creo que usted desea sin ninguna propiedad de posicionamiento. Simplemente agregue relleno: derecho al formulario (o el div del formulario, lo que sea) para proporcionar suficiente espacio para su error y asegúrese de que su error encaje en esa área. Luego, tiene una clase css preconfigurada llamada “error” y la establece como si tuviera un margen negativo más arriba aproximadamente la altura de su campo de entrada y un margen izquierdo alrededor de la distancia desde la izquierda hasta donde está su margen derecho debería empezar. Probé esto, no es genial, pero funciona con tres propiedades y no requiere flotantes o absolutos:

       

    Desafortunadamente no puedo comentar con mi reputación de novato, pero tengo una solución para el problema de la pantalla en blanco, o al menos esto es lo que funcionó para mí. En lugar de establecer la clase contenedora dentro de la función errorPlacement, configúrela inmediatamente cuando configure el tipo de envoltura.

     $('#myForm').validate({ errorElement: "div", wrapper: "div class=\"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() + 5); error.css('top', offset.top - 3); } 

    });

    Asumo que hacerlo de esta manera permite al validador saber qué elementos de div eliminar, en lugar de todos. Funcionó para mí, pero no estoy del todo seguro de por qué, así que si alguien pudiera dar más detalles, eso podría ayudar a otros de una tonelada.

    Esa respuesta realmente me ayudó, en mi caso tuve que filtrar algunos elementos y tener una alineación especial en su error div,

     errorPlacement:function(error,element) { if (element.attr("id") == "special_element") { // special align } else { // default error scheme error.insertAfter(element); } } 

    Agregue el siguiente CSS a su método .validate para cambiar el css o la funcionalidad

      errorElement: "div", wrapper: "div", errorPlacement: function(error, element) { offset = element.offset(); error.insertAfter(element) error.css('color','red'); } 

    Si pudieras dar alguna razón de por qué necesitas reemplazar la etiqueta con un div, eso ciertamente ayudaría …

    Además, podría pegar una muestra que sería útil ( http://dpaste.com/ o http://pastebin.com/ )