In an effort to improve usability and reduce server calls on a complex form, I've been implementing jQuery's validation plugin.  jQuery makes it extremely easy to validate a form with minimal code.  I wasn't happy with the default style of error message, I  didn't want a large line of error text disrupting the structure of my form. I wanted a simple icon to indicate there was an error and when the user hovers over the icon I wanted to utilise jQueries tooltip plugin to explain the error. I had a good search on the internet but couldn’t find a solution. What I did find was lots of other people in the same situation.

Now I've successfully managed to combine jQuery validation with the tooltip plugin I thought I had better share it.

You can output HTML in the validation error messages, so displaying the icon/image isn't difficult in the slightest. The difficult part is applying tooltips to the error image. You can't apply tooltips to every image in the usual way inside $(document).ready because your error images haven't been inserted into the HTML yet.

So the logical thing to do is apply the tooltips to the error images when an error is generated. I spent hours with this, using the alert() function trying to work out why the tooltips I'm trying to apply aren't actualy apearing. After checking the documentation for both jQuery validation and the tooltip plugin, searching the internet and scouring the plugin files line by line I managed to work out what was going on. It turns out the tooltip plugin was removing the title and alt attributes so they wouldn't conflict with the new fancy tooltips (why didn't I think of this hours ago!?).

So my first thought was to modify the plugin file so it didn't clear those attributes and it worked like a dream. I wasn't happy with this solution though as I didn't want to alter the plugin file. So instead I decided to use my own attribute 'hovertext' as the tooltip text. The plugin can then remove the title and alt attribute leaving my 'hovertext' attribute intact for me to use once an error has been generated.

Steps required to combine the jQuery tooltip and validation plugin.

• Setup both the validation plugin and the tooltip plugin
• Create your validate error messages as html to output an image
• Create a validation success function that inserts html for the success image into the label
• Create your own function that can be called later in your script. In this function you will need to apply tooltips to the error images but instead of using the default alt/title tag for the tooltip you must use the bodyHandler option to get the 'hovertext' attribute from the error image.
• Make sure your form is inside a div, make the mouseover event for that div call the above function

See example for JavaScript source - Hopefully this will be of some help?

This entry was posted on Wednesday, July 1st, 2009 at 9:09 pm and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.