Long form using jquery Validate causes IE slowscript 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 ta

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.

Answer 2

We recently had similar issue with a page containing more than 600 checkboxes. The solution we found was to redefine the "elements" function of jquery validate. This methods (as we understand it) seems to be in charge of detecting all inputs of the form. This list of inputs is then used to call the valid() method for each input name. Given the sheer amount of checkboxes this causes a huge overhead (each input resulting in a jquery object being created).

The elements method was reimplemented as follow:

var ret=[];
var form=$(this.currentForm);
for(var inputName in this.settings.rules){
    var inputs=form.find("[name='"+inputName+"']");
    if(inputs.length>0){
        console.log("Found input name: "+inputName);
        ret.push(inputs[0]);
    }
 }
 return ret;

In our case we went from several 100ms with the original elements method to ~10ms with Firefox.

Note Jquery validate version 1.11.1

Answer 3

Thim's answer will do the trick, here is slight modified version of it. Basically, replacing elements method from jquery validate plugin with the below code will surely improve timing if you're having what too many input fields to validate.

elements: function() {            
        var ret = [];
        var form = $(this.currentForm);
        for (var inputName in this.settings.rules) {                
            var inputs = form.find("input[name='" + inputName + "'], select[name='" + inputName + "'], textarea[name='" + inputName + "']");
            if (inputs.length > 0) {                    
                ret.push(inputs[0]);
            }
        }   
        /*You can comment below code if you're adding required rules explicitly*/           
        var _required = form.find(".required");         
        for (var i = 0; i < _required.length ; i++)
            ret.push(_required[i]);

        /*if you don't do this, you may encounter an error*/    
        return $(ret).map(function () {
            return this;
        });         
    }