jQuery Validation Plugin and Tooltipster Plugin error

Question

I'm trying to customize the error messages that user's get by using the Tooltipster plugin and I run into the following problem:

You called Tooltipster's "content" method on an uninitialized element

My HTML code:

<form>
  <input id="one" type="number" name="one" />
  <input id="two" type="number" name="two" />
  <button id="button" type="submit">Submit</button>
</form>

Javascript:

$(document).ready(function () {

            $('form').validate({ // initialize the plugin
                rules: {
                    one: {
                        required: true,
                        min: 1,
                        max: 100
                    },
                    two: {
                        required: true,
                        min: 50,
                        max: 80
                    }
                },
                submitHandler: function (form) {
                    doTest();
                    return false;
                },
                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');
                }
            });

        });

What might be the problem?

score 7 · Accepted Answer · edited May 23 '17 at 12:22

7

Console error:

You called Tooltipster's "content" method on an uninitialized element

The problem is that you have not properly initialized the Tooltipster plugin on your input elements.

// initialize tooltipster on form input elements
$('form input').tooltipster({  // <-  USE THE PROPER SELECTOR FOR YOUR INPUTs
    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
});

See: https://stackoverflow.com/a/14741689/594235

edited May 23 '17 at 12:22

Community

1
1

answered Mar 13 '14 at 20:53

Sparky

98,165
25
199
285

@kalpetros, [as you can see, it works without errors](http://jsfiddle.net/2DUX2/3/). – Sparky Mar 13 '14 at 21:56
1

@kalpetros, you have to make sure you properly target your input elements. Try changing `$('form input[type="text"]').tooltipster(...` to `$('form input').tooltipster(...` – Sparky Mar 13 '14 at 21:58
It works now. What I did is I changed `$('form input[type="text"]')` to `$('form input')`. – kalpetros Mar 13 '14 at 22:26
@kalpetros, yes, as long as you select the same input elements considered for validation it will work. `$('form input')` will select _all_ `input` elements inside of _all_ `form` elements. – Sparky Mar 13 '14 at 22:43

jQuery Validation Plugin and Tooltipster Plugin error

1 Answers1