Sparky Sparky - 2 months ago 17
jQuery Question

How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

I'd like to use the Tooltipster plugin to display form errors generated by the jQuery Validate plugin.

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>


How would I integrate the usage of these two jQuery plugins so that validation errors appear inside the tooltips?

Answer

First, initialize the Tooltipster plugin (with any options) on all specific form elements that will display errors:

$(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
    });

});

Second, use Tooltipster's advanced options along with the success: and errorPlacement: callback functions built into the Validate plugin to automatically show and hide the tooltips as follows:

$(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');
        }
    });

});

Working Demo: http://jsfiddle.net/2DUX2

EDIT: Updated code to take advantage of the new Tooltipster API features released in version 2.1 on 2/12/13


UPDATE for Tooltipster 3.0

Tooltipster 3.0 is out and as such doesn't work the same as illustrated above. The following code provides an updated example. This version has the added benefit of not calling Tooltipster on every keystroke when the message has not yet changed.

(Don't forget that you still need to attach .tooltipster() to your relevant input elements as illustrated above.)

$(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 using Tooltipster version 3.0: jsfiddle.net/2DUX2/3/

Comments