jQuery script taking too much time in IE

Question

I have a page with say 120 date boxes. I am using the validate plugin to validate those boxes on page submit. I have written some custom date validation code.

I use the jQuery.validator.addMethod() to create rules and then I use validator.addClassRules() to add those validations to my calendars.

Its running fine in firefox (at times) but in IE as soon as I hit enter it gives a popup saying "A script on this page is causing Internet explorer to slow down...."

can someone please help.

Adding the code too.....

/******* This is the input thats there *********/
<input type="text" toDate="${dateRangeModel.toDate}" fromDate="${dateRangeModel.fromDate}" prefill="mm/dd/yyyy" class="calendarInput"  />

/* Checking if its a valid date */
            jQuery.validator.addMethod("isDateValid",function(value, element) { 
                    var re =  /(0[1-9]|1[012]|[1-9])+\/(0[1-9]|[12][0-9]|3[01]|[1-9])+\/(19|20)\d\d/;                                      

                    if($(element).is(':hidden') || value.match(re) || value === $(element).attr('prefill')){
                        return true;
                    }
                    else    {
                        return false;
                    }
            }, 'Enter a valid date');


/******** Adding class rule ***********/
$.validator.addClassRules({
                calendarInput: {
                    dateRange:true,
                    isDateValid: true
                }
            });

Answer 1

The best tool for IE specific performance problems is dynaTrace AJAX Edition. They have quick start tutorials on the site, just fire up your page and see what's taking the most time to execute.

And yes, it's free :)

Answer 2

One thing you can do is compile the regular expression outside of the validation call, like

var re = new RegExp("(0[1-9]|1[012]|[1-9])+\/(0[1-9]|[12][0-9]|3[01]|[1-9])+\/(19|20)\d\d");

and then reuse the same object in all the validation calls rather than constantly rebuilding it. That said, having 120 of pretty much anything on the same page is a UI disaster.

You can shorten up the rest of it (mainly to make it more concise) as well:

jQuery.validator.addMethod("isDateValid",function(value, element) { 
    return ($(element).is(':hidden') || value === $(element).attr('prefill') || value.match(re));
}, 'Enter a valid date');

I reordered the test in the hopes putting the regex test last would make things a bit faster.