Google Toolbar overwriting labels when using jQuery’s Validate plugin

Please note, this issue only effects IE7 (not sure about 6, as I don’t have it).

For some reason, when using IE7, jQuery’s validate plugin and Google Toolbar (with AutoFill on), Google Toolbar is deciding to overwrite the value, after a quick google I came across this link:

http://code.jenseng.com/google/

‘Outsmarting the Google Toolbar’, the page gives a bit of useful information in that an input elements title attribute is overwritten, and how to prevent the yellow background that AutoFill brings, not quite what I was after.

Other things I tried were adding to the form or field autocomplete="off" or autofill="off" and many different twists on this but alas no luck.

Let’s take a step back and figure out whats going on.

The Google Toolbar will pick up on the following:

1. An inputs name
2. An inputs id
3. An inputs title
4. Any label elements containing relevent text (e.g. Your E-Mail Address) relating to the input element

So thinking about the above I had a play about and found something interesting, in the form of a solution (albeit downright weird). As mentioned when AutoFill is active and a page renders, an elements title value is changed to “Your Google Toolbar can fill this in for you. Select AutoFill”. When the label generated by the validation plugin is altered from our intended message it is actually to: “Your Google Toolbar can fill this in for you. Select AutoFill”.

So the fix that works for me is, put your default/required validation message in the title attribute of the element being validated.

The Toolbar replaces the labels contents with the title message, couldn’t tell you why, must be a bug but thats how it is. This does leave us with an error message where there shouldn’t be one, the immediate thought would be to add a class to the effected input elements and run some code like the following on DOM load.


$("input.remove_title").attr("title", "");


I hope this saves someone a few headaches =]