Bug with JQuery validation error messages showing tooltip text

I had the following html in my form:



Nothing complicated there I hope.
I had the help text set in the title attribute of the input which I styled with the lovely qTip to make it look nice. I validated my entry using the jQuery validation plugin which also works well. The problem is that if an attempt is made to submit the form before any attempt at editing the value or showing the tooltip, the error message would show the value of the tooltip (“Don’t worry…“) instead of the validation error message (“This field is required“).

It’s taken me a while to find the cause, but the fix is easy. When invoking the validator, throw in the option to ignore title attributes.

$("#your-form").validate({
ignoreTitle: true
})

One thought on “Bug with JQuery validation error messages showing tooltip text”

Leave a Reply

Your email address will not be published. Required fields are marked *