Getting error on successful input entry using jQuery Validate and qTip2

Question

I previously used custom CSS, then jquery UI for my form error validation layouts along with the powerful jQuery Validation script. A friend recently recommended I check out qTip2 as it provides some interesting customizations that the others were harder to implement. I have been dreading the decision to test it out for the last 48 hours. I'm hoping I'm just making a goofy mistake but when I test on my local machine I receive all kinds of strange errors. For instance, with the code in this JSFIddle:

http://jsfiddle.net/rktWw/1/

The form completely ignores the validation and processes the page as form normally would. If I remove the success:"valid" selector, (or any success: for that matter) the page works as it normally should except the form errors are not removed when successfully changed.

The JS Fiddle I set up above also throws all sorts of errors. For instance, if you hit submit once, errors are thrown as expected. However, if you enter text in the name field then hit 'submit' again, the form tries to process (something which should not occurr regardless due to the submitHandler: in the script.

Does anybody have any guidance on these woes?

and I have tried to reach out to the qTip2 forum but their registration is broken so I'm unable to use it as a method of assistance (it asks for a captcha which does not exist) as of today — JM4, Jul 19 '13 at 17:18
I have a lot of respect for Craig and what he's done with qTip2, however, it seems that as soon as he gets one bug fixed, a previous bug comes back. It was a never-ending beta test with this plugin. See Tooltipser and this [answer](http://stackoverflow.com/a/14741689/594235) showing you how to use it with jQuery Validate. — Sparky, Jul 19 '13 at 17:19
@Sparky - thanks for the link. Do you have another plugin you recommend for this functionality or simply going back to jQuery UI/custom class methods? — JM4, Jul 19 '13 at 17:26
As shown in my previous comment with the link, I recommend the Tooltipster jQuery plugin. (No dependancy on jQuery UI) — Sparky, Jul 19 '13 at 17:36

score 1 · Accepted Answer · edited May 23 '17 at 12:06

This is how I've been using qTip2 on some of my sites. It was very fussy to get working properly and required a lot of assistance from the qTip developer. I place the qTip .destroy method within the success callback function, not chained within errorPlacement as you've done.

$(document).ready(function () {

    $('#myform').validate({
        rules: {
            //
        },
        success: function (error) {
            setTimeout(function () { // Use a mini timeout to make sure the tooltip is rendred before hiding it
                $('#myform').find('.valid').qtip('destroy');
            }, 1);
        },
        submitHandler: function (form) {
             // my ajax
            return false;
        },
        errorPlacement: function (error, element) {
            var cornersAt = ['left center', 'top left'], // Set positioning based on the elements position in the form
                cornersMy = ['right bottom', 'bottom right'],
                flipIt = $(element).parents('div.left').length > 0,
                position = {
                    at: cornersAt[flipIt ? 0 : 1],
                    my: cornersMy[flipIt ? 0 : 1]
                },
                offset = flipIt ? 6 : 35;
            $(element).filter(':not(.valid)').qtip({ // Apply the tooltip only if it isn't valid
                overwrite: false,
                content: error,
                position: position,
                show: {
                    event: false,
                    ready: true
                },
                hide: false,
                style: { // Make it red... the classic error colour!
                    classes: 'ui-tooltip-error ui-tooltip-rounded',
                    tip: {
                        corner: true,
                        offset: offset
                    }
                }
            }).qtip('option', 'content.text', error);
        } // closes errorPlacement
    }); // closes validate()

});

For an alternative jQuery Tooltip plugin, I've recently switched to Tooltipster, which is a whole lot cleaner to integrate with jQuery Validate.

See this answer for a demo: https://stackoverflow.com/a/14741689/594235

Getting error on successful input entry using jQuery Validate and qTip2

1 Answers1