Performance problem with required field on IE8

[adam-lynch]

We've an immediate problem with required fields in Internet Explorer 8; typing in the field is too slow. We're using version 1.3.6.

An example input has data-validation-required-message="blah blah" and no required attribute.

My guess is that the validation is done on keypress/down/up when it actually shouldn't be for required fields. Required fields should only be checked on blur, right?

Is there anything I can do to enforce required fields only being checked on focus and blur?

[adam-lynch]

Hmm, I think I've confirmed that the poor performance is because the field is validated when it's changed. After a quick look through the source, I disabled the binding of validation to any change events:

$this.bind(
            [
              //"keyup",
              "focus",
              "blur",
              "click",
              //"keydown",
              //"keypress",
              //"change",
              "revalidate"
            ].join(".validation ") + ".validation",
            function (e, params) {  
                 ......

Line 471 - 482

It's now much faster.

Why is the validation bound to all of those change events anyway?
I'm talking abut keydown, keypress, keyup, and change. Won't that result in the validation being called for every one of those events the browser supports?

Now I've to figure out how to determine if the field is to be validated as required, and only required. Then dynamically build the array containing the names of the events to bind to.

[adam-lynch]

Update

I really wanted not to touch the source of this plugin but unbinding events after they are asynchronously added was a bit too unreliable.

So, what I did was this:

var events = [
                "change",
                "focus",
                "blur",
                "click",
                "revalidate"
            ];

            if( !(1 === validatorNames.length && 'required' === validatorNames[0].toLowerCase()) ){
                events.concat([
                 "keydown",
                 "keypress",
                 "keyup"
                 ]);
            }

            $this.bind(
                events.join(".validation ") + ".validation",
            function (e, params) {

Leaving change in there seems not to effect performance too much so I'll leave it in there for now.

P.S. for anyone else needing to do something similiar, this probably won't work for you unless you turn off HTML sniffing. That's because it'll read the maxlength attribute you likely have and store a max length constraint to check against later, which was a pointless check for me since we've got the browser enforcing the max length via that property and validation on the server-side too. So, you'd require a tiny bit more logic if you want this to apply to more than just required fields.

[ReactiveRaven]

TODO: add info about bindEvents to docs. link