Using jQuery autocomplete using the onBlur validator function

Question

Here is my problem, I have an input element in a form that implements jQuery.Autocomplete and jQuery.validate, all work fine, except when I click an element in the autocomplete list to select it.

What happens is that the check happens before autocomplete sets its value. Since validation is done on onBlur and you just clicked an item in the autocomplete list, blurring and validation are done two seconds before entering a new value.

I would not mind a double check if it was the client side, but I happen to perform an expensive remote ajax check in this field, so I really would like to solve this correctly.

My first thought is to proxy all onBlur event checks through a function that expires after 10 ms, essentially reversing the order of events. But, I think it means breaking the jQuery.Validate.js code, which I would rather not do.

Any ideas?

Answer 1

I managed to get this job, but maybe not as elegantly as I would like. Ideally, I would like to name the prototype or the default version of onfocusout from the timeout, but I could not figure out how to refer to it from this area.

The approach that I used instead was to override the onfocusout method with its copy of code / pasted into the timeout closure. The only other setting is to change the links to this to work within a different area of ​​the closing timeout.

$("#aspnetForm").validate({ success: "valid", onkeyup: "false", onfocusout: function(element) { //Delay validation so autocomplete can fill field. var _this = this; setTimeout(function() { if (!_this.checkable(element) && (element.name in _this.submitted || !_this.optional(element))) _this.element(element); _this = null; }, 250); } }); 

Feel free to post the improvements.