Long form using jquery Validate causes IE slow script warning

Question

I have been using jquery validate plugin http://bassistance.de/jquery-plugins/jquery-plugin-validation/. It has been working successfully, though now I have a form with a table, with 100 or so rows, each with an input box

http://jsfiddle.net/X8tsR/

This causes the "a script on this page is causing internet explorer to run slowly" warning in IE.

I am wondering if there is a problem with my implementation or if it is just unreasonable to expect this validation script to run on this much content?

Answer 1

Pages are single threaded, so having a long running script will cause the page to lock up. Browsers like Internet Explorer use a single thread for the entire browser, so that means that the entire browser will become unresponsive. As a solution, browsers will stop code that appears to be taking too long and ask the user if they want the script to continue to run.

Older versions of internet explorer don't have especially fast javascript engines, so iterating through 100 inputs and validating them will take a long time, and possibly longer with things like .each(). Even though the code will technically run, it will take a long time. You might be able to do things to optimize your code but a simple solution I think would be to attach an event listener to each of the inputs, and validate them as the user inputs the values. This would have the double benefit of the user not having to scroll through the long form and find the invalid fields and it would allow the browser to only validate one box at a time.

Finally, you may want to consider breaking this up into a multi-step process, which might be helpful for usability, and has the added benefit of saving state before the user gets too far along and something bad happens.