CODEWITHSUNDEEP
javascriptjqueryvalidationjquery-uiparsley.js
Edward
Edward

Reputation: 1883

Show JqueryUI tooltip based on parsley validation

I am having some trouble with getting the JQueryUI Tooltip Widget working with parsley validation. This is my code:

    $.listen('parsley:field:error', function (fieldInstance) {
        var messages = ParsleyUI.getErrorsMessages(fieldInstance);

        if(fieldInstance.$element.tooltip('instance') != undefined) {
            fieldInstance.$element.tooltip('destroy');
        }

        fieldInstance.$element.tooltip({
            items: fieldInstance.$element,
            content: messages,
            show: 'pulsate'
        });

        fieldInstance.$element.tooltip('show');
    });

My methology is:

  1. Check if a tooltip exists (as multiple validation occur), if it does destroy it.
  2. Create the tooltip with the appropriate message
  3. Show the tooltip

But I just get a consol error:

Uncaught Error: no such method 'show' for tooltip widget instance

Also, if anyone thinks there is a better way of doing this please don't hesitate to answer!

Upvotes: 1

Views: 789

Answers (1)

Luís Cruz
Luís Cruz

Reputation: 14970

You have a few issues with your code:

  1. The main issue is that you're calling .tooltip('show'); but there is no such method or event, according to the API documentation. You have to use .tooltip('open').
  2. The content option accepts a function or string and you're passing an array. You need to implode the messages array with something like messages.join('<br />')
  3. In order to show the errors only within the tooltip, you need to change the default options of parlsey, specifically errorsContainer and errorsWrapper.

Your final code will be something like this (test in this jsfiddle):

$(document).ready(function() {
    $("#myForm").parsley({
        errorsContainer: function (ParsleyField) {
            return ParsleyField.$element.attr("title");
        },
        errorsWrapper: false
    });

    $.listen('parsley:field:error', function (fieldInstance) {
        var messages = ParsleyUI.getErrorsMessages(fieldInstance);

        if(fieldInstance.$element.tooltip('instance') != undefined) {
            fieldInstance.$element.tooltip('destroy');
        }

        fieldInstance.$element.tooltip({
            content: messages.join('<br />'),
            items: fieldInstance.$element,
            show: 'pulsate'
        });

        fieldInstance.$element.tooltip('open');
    });
});

Upvotes: 2

Related Questions