plugin - tooltip animation jquery

¿Cómo se muestran los mensajes del complemento jQuery Validate dentro de Tooltipster tooltips?

Question

Me gustaría utilizar el complemento Tooltipster para mostrar los errores de formulario generados por el complemento jQuery Validate .

jQuery for Validate plugin :

$(document).ready(function () {

    $(''#myform'').validate({ // initialize jQuery Validate
        // other options,
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        }
    });

});

jQuery for Tooltipster plugin :

$(document).ready(function () {

    $(''.tooltip'').tooltipster({ /* options */ });  // initialize tooltipster

});

HTML :

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <br/>
    <input type="submit" />
</form>

¿Cómo podría integrar el uso de estos dos plugins de jQuery para que los errores de validación aparezcan dentro de la información sobre herramientas?

Answer 1

La respuesta de Sparky ha sido un elemento básico en la validación de mi sitio, pero la actualización a Tooltipster 4 requirió algunos cambios. Así es como conseguí que el mío funcionara, y con algunas mejoras.

En sus páginas, incluya tooltipster css y un tema css en la sección head (y cualquier tema CSS con el que subclasifique sus temas, tal como se describe en su página).

<link rel="stylesheet" type="text/css" href="/styles/tooltipster.bundle.css">
<link rel="stylesheet" type="text/css" href="/styles/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css">

Además, debe incluir el archivo javascript de tooltipster. También necesitarás javascript de validación jquery.

<script src="/js/tooltipster.bundle.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>

Ahora, ya sea en otro archivo javascript o en algunas etiquetas de script, tendrá que poner su código de validación, así como su código tooltipster. Aquí hay una de una página web que tengo, los cambios de la respuesta de Sparky están en la parte superior.

$(document).ready(function(){

    $(''#form input[type="text"]'').tooltipster({ //find more options on the tooltipster page
        trigger: ''custom'', // default is ''hover'' which is no good here
        onlyOne: false,    // allow multiple tips to be open at a time
        position: ''top'',
        animation: ''grow'', 
        theme: [''tooltipster-light''] //put your themes here
    });

    //form validation initialization
    $("#form").validate({
        errorPlacement: function (error, element) {
            if (error[0].innerHTML != null && error[0].innerHTML !== "") {
                $(element).tooltipster(''content'', $(error).text());
                $(element).tooltipster(''open''); //open only if the error message is not blank. By default jquery-validate will return a label with no actual text in it so we have to check the innerHTML.
            }
        },
        success: function (label, element) {
            var obj = $(element);
            if (obj.hasClass(''tooltipstered'') && obj.hasClass(''error'')) {
                $(element).tooltipster(''close''); //hide no longer works in v4, must use close
            }   
        },
        rules: {
            // your rules
            ......
        }
    });

});

Ahora, cuando escribe algo en un campo que infringe una de las reglas enumeradas, aparece una ventana emergente sobre el recuadro que dice que lo que jquery-validate dice es incorrecto. Tampoco abrirá un mensaje si no hay nada que muestre al usuario (lo que lo llevaría a abrir una información sobre herramientas en blanco y luego a cerrarlo de inmediato, lo que se ve raro).

Answer 2

Las soluciones para las versiones 2.1, 3.0 y 4.0 de Tooltipster están incluidas en esta respuesta.

NOTA que .tooltipster() solo se adjunta a un elemento de input type="text" en mis ejemplos a continuación. Si su form contiene otros tipos de elementos de entrada de datos como type="radio" , type="date" , textarea , select , etc., entonces debe ajustar su selector en consecuencia o crear instancias adicionales de .tooltipster() para estos otros elementos. De lo contrario, todo fallará con errores.

Tooltipster v2.1

Primero, inicialice el complemento Tooltipster ( con cualquier opción ) en todos los elementos de form específicos que mostrarán errores:

$(document).ready(function () {

    // initialize tooltipster on form input elements
    $(''#myform input[type="text"]'').tooltipster({ 
        trigger: ''custom'', // default is ''hover'' which is no good here
        onlyOne: false,    // allow multiple tips to be open at a time
        position: ''right''  // display the tips to the right of the element
    });

});

En segundo lugar, use las opciones avanzadas de errorPlacement: junto con las funciones de success: y errorPlacement: callback integradas en el complemento Validate para mostrar y ocultar automáticamente la información sobre herramientas de la siguiente manera:

$(document).ready(function () {

    // initialize validate plugin on the form
    $(''#myform'').validate({
        // any other options & rules,
        errorPlacement: function (error, element) {
            $(element).tooltipster(''update'', $(error).text());
            $(element).tooltipster(''show'');
        },
        success: function (label, element) {
            $(element).tooltipster(''hide'');
        }
    });

});

Demo de trabajo: http://jsfiddle.net/2DUX2

EDITAR : Código actualizado para aprovechar las nuevas características de API de Tooltipster lanzadas en la versión 2.1 el 2/12/13

ACTUALIZACIÓN para Tooltipster v3.0

Tooltipster 3.0 está fuera y, como tal, no funciona igual que en la ilustración anterior. El siguiente código proporciona un ejemplo actualizado. Esta versión tiene la ventaja adicional de no llamar a Tooltipster en cada pulsación cuando el mensaje aún no ha cambiado.

( No olvide que aún necesita adjuntar .tooltipster() a sus elementos de input relevantes como se ilustra arriba ) .

$(document).ready(function () {

    // initialize validate plugin on the form
    $(''#myform'').validate({
        // any other options & rules,
        errorPlacement: function (error, element) {
            var lastError = $(element).data(''lastError''),
                newError = $(error).text();

            $(element).data(''lastError'', newError);

            if(newError !== '''' && newError !== lastError){
                $(element).tooltipster(''content'', newError);
                $(element).tooltipster(''show'');
            }
        },
        success: function (label, element) {
            $(element).tooltipster(''hide'');
        }
    });

});

DEMO utilizando Tooltipster v3.0: jsfiddle.net/2DUX2/3/

ACTUALIZACIÓN para Tooltipster v4.0

Tenga en cuenta que la opción onlyOne se ha eliminado de la versión 4.0 del complemento Tooltipster.

También reemplacé la devolución de llamada de success con unhighlight . En los campos "opcionales", el mensaje de error nunca se eliminó cuando el campo se borró posteriormente ... esto se debe a que la función de success no se dispara en estas circunstancias. Este problema no estaba aislado en la versión 4 de Tooltipster, sin embargo, el siguiente código lo soluciona en el futuro.

// initialize Tooltipster on text input elements
$(''input[type="text"]'').tooltipster({ //find more options on the tooltipster page
    trigger: ''custom'', // default is ''hover'' which is no good here
    position: ''top'',
    animation: ''grow''
});

// initialize jQuery Validate
$("#myform").validate({
    errorPlacement: function (error, element) {
        var ele = $(element),
            err = $(error),
            msg = err.text();
        if (msg != null && msg !== '''') {
            ele.tooltipster(''content'', msg);
            ele.tooltipster(''open'');
        }
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).removeClass(errorClass).addClass(validClass).tooltipster(''close'');
    },
    rules: {
        ....

DEMO usando Tooltipster v4.0: https://jsfiddle.net/h5grrrr9/