I recently used the basic principles in Validation Hints For Your Form by askthecssguy.com for a password management application. I didn't notice any problems on my speedy development machine, but when I pushed the app to some beta testers, I noticed some slower-than-expected performance in IE. As it turns out, the problem was due to the JavaScript that would update an element's class, triggered by the onkeyup event of an input field. It was slow enough to even be disruptive to the experience.

Here is an example of a function that could duplicate the slowdown in IE. It could be attached to the onkeyup event of the username field. It will provide immediate feedback by altering the class name of the field's container when criteria are met (in this case, the value being greater than 7 characters in length). Your CSS and HTML can then determine exactly what that feedback will look like.

As it turns out, the slowdown in IE is due to a general slowdown that IE experiences anytime the class name of the element is changed. It may be unnoticeable if it happens once, but when it happens on every key press, it is noticeable. The slowdown only occurs, however, when the class name is changed, not when the value is referenced. So the easy solution is to compare the existing value to the value you want to set, and only assign the class name if it is different.

You might change the function above to look something like this.

This will theoretically improve performance in all browsers, although it is relatively moot in Firefox, as it doesn't experience the same level of slowdown. But for IE, this tweak in your code will make a noticeable speed improvement.