A do-it yourself blog
Using JQuery Validation plugin with tooltips
Today I’ll share with you a little tweak that took me a while to figure out.
I wanted to tweak the excelent jQuery Validation plugin to display errors in tooltips.
Here is my solution using Qtip
So first off you got to setup Qtip and the validation plugin on your website.
then you have to use the *undocumented* errorPlacement option on the validation plugin
jQuery.validator.setDefaults({
errorPlacement: function(error, placement) {
$(placement).qtip({
content: error.text(),
show: { when: { event: 'none'}, ready: true },
hide: { when: { event: 'keydown' } },
position: {
corner: {
target: 'topRight',
tooltip: 'bottomLeft'
}
},
style: {
border: {
width: 1,
radius: 10
},
tip: true,
name: 'red'
}
});
}
});
Of course you can modify this to use another tooltip system…
Have fun !
The tooltip worked, but now the form allows to post even with validation errors… =[
This is exactly what I need! Thank you!