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:
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?
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