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

by

Solutions for Tooltipster versions 2.1, 3.0, & 4.0 are included in this answer.

NOTE that .tooltipster() is only attached to a type="text" input element in my examples below. If your form contains other kinds of data input elements such as type="radio", type="date", textarea, select, etc., then you must adjust your selector accordingly or create additional instances of .tooltipster() for these other elements. Otherwise, everything will fail with errors.

Tooltipster v2.1

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 v3.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 v3.0: jsfiddle.net/2DUX2/3/

UPDATE for Tooltipster v4.0

Note that the onlyOne option has been removed from the 4.0 version of the Tooltipster plugin.

I also replaced the success callback with unhighlight. On “optional” fields, the error message was never removed when the field was subsequently blanked out… this is because the success function does not fire under these circumstances. This issue is not isolated to Tooltipster version 4, however the following code solves it moving forward.

// 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 using Tooltipster v4.0: https://jsfiddle.net/h5grrrr9/

More Related Contents:

  1. jQuery validate: How to add a rule for regular expression validation?
  2. Validate that end date is greater than start date with jQuery
  3. jQuery Validation Plugin – adding rules that apply to multiple fields
  4. jQuery Validate array input element which is created dynamically
  5. Using JQuery Validate Plugin to validate multiple form fields with identical names
  6. jQuery Validate Required Select
  7. jQuery validator and a custom rule that uses AJAX
  8. How to validate array of inputs using validate plugin jquery
  9. jQuery validate dynamic input array
  10. Change Twitter Bootstrap Tooltip content on click
  11. Unobtrusive validation in Chrome won’t validate with dd/mm/yyyy
  12. jQuery Validate plugin – password check – minimum requirements – Regex
  13. How can I display a tooltip on an HTML “option” tag?
  14. how to test Recaptcha with jQuery Validate plugin
  15. jQuery override default validation error message display (Css) Popup/Tooltip like
  16. jQuery Validation – Two fields, only required to fill in one
  17. Jquery Validation for Dynamically Created Fields
  18. onkeyup and onfocusout is not working in jQuery Validate
  19. jQuery Validation plugin won’t validate when in click event handler of
  20. select2 and jquery validation not working properly
  21. Validate dynamic field jquery
  22. Ignore all hidden div but not one in jQuery validation
  23. JQuery Validate multiple fields with one error
  24. How to make select2 work with jquery.validation plugin?
  25. jquery validation: prevent form submit
  26. Manually set unobtrusive validation error on a textbox
  27. Validating array inputs using jquery validation plugin
  28. MVC 4 client side validation not working
  29. Overriding CSS styles of the jQuery UI Tooltip widget
  30. jQuery multiple input name[] validation

Leave a Comment