I'm trying to figure out how to integrate jQuery Validation plugin
with the qTip plugin [0] to show custom error message displays. I've
had partial success with the following code:
$("#RegistrationForm").validate(
{
errorElement: "span",
errorPlacement: function(error, element)
{
element.qtip(
{
content: error,
ready: true,
show: { ready: true, effect: { type: 'fade', length:
500 } },
hide: { when: { event: 'inactive' }, effect: { type:
'fade',
length: 500 } },
position: { corner: { target: 'rightMiddle', tooltip:
'leftMiddle' } },
style: { name: 'red', tip: { corner: 'leftMiddle' },
border:
{ radius: 5 } }
});
},
rules:
{ ... },
messages:
{ ... }
}
At this point, that successfully displays the validation failure
message in a qTip tooltip when it occurs, but there are two problems
with it:
1) The error tooltip toggles between visible and invisible onmouseover
and onmouseout. I'm sure this isn't really an issue with the
Validation plugin, but rather something I need to figure out with the
tooltip plugin. But, my bigger problem is...
2) Even when the invalid condition is fixed (valid data is later
entered into the field), the error tooltip remains attached to the
field that was previously invalid, even after the field is valid, and
continues to toggle between visible and invisible onmouseover and
onmouseout. I'm fairly certain that this is because I've not yet
destroyed the tooltip object, but, I can't seem to figure out a way to
intercept the "valid" or "success" event with a reference to the
element so that I *can* destroy the attached tooltip object.
So, what would be helpful to me is either, if someone has had any
experience with combining qTip with Validation, or, if I'm missing
something in the docs (I've not been able to find anything like this
yet) about how to handle/override event handlers for individual form
element invalidation/success. I *did* try attaching a function to the
"success" attribute of the validate function, but that seems to only
give me a reference to the success label, and not the element that its
attached to.
Any guidance that anyone might be able to provide would be greatly
appreciated. Thanks.
[0]: http://craigsworks.com/projects/qtip
