How to delay onkeyup event in jQuery validation plugin
I have a form that uses the jQuery validation plugin to validate its fields. In one of these fields, validation is done using ajax. The problem is that every keystroke triggers this validation rule and hence makes ajax calls, which is not what I want. Now I can turn off the onkeyup for this field, but I would rather have a 5 second delay after the user types and then call my custom rule that contains the ajax method.
I have been looking for a while, came across this How to delay the .keyup () handler until the user stops typing? but not sure how to use it with the validation plugin. Can anyone help me figure this out?
jQuery.validator.addMethod("ruleName", function(value, element) {
// AJAX call here to validate value
});
jQuery('form').validate({
onkeyup: function(element) {
// Do I do something here ?
},
rules: {
name: {
required: true,
ruleName: true
}
}
});
source to share
You can change the onkeyup function , but that will affect all the fields in your form, so either you have a delay in each field or you don't have a delay.
From jquery.validate.js function onkeyup default indicated as
onkeyup: function( element, event ) {
// Avoid revalidate the field when pressing one of the following keys
// Shift => 16
// Ctrl => 17
// Alt => 18
// Caps lock => 20
// End => 35
// Home => 36
// Left arrow => 37
// Up arrow => 38
// Right arrow => 39
// Down arrow => 40
// Insert => 45
// Num lock => 144
// AltGr key => 225
var excludedKeys = [
16, 17, 18, 20, 35, 36, 37,
38, 39, 40, 45, 144, 225
];
if ( event.which === 9 && this.elementValue( element ) === "" || $.inArray( event.keyCode, excludedKeys ) !== -1 ) {
// Do nothing
return;
} else if ( element.name in this.submitted || element.name in this.invalid ) {
// Start validation
this.element( element );
}
},
if you want to add a delay before validation you need to change your code to
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
jQuery('form').validate({
onkeyup: onkeyup: function( element, event ) {
// Avoid revalidate the field when pressing one of the following keys
// Shift => 16
// Ctrl => 17
// Alt => 18
// Caps lock => 20
// End => 35
// Home => 36
// Left arrow => 37
// Up arrow => 38
// Right arrow => 39
// Down arrow => 40
// Insert => 45
// Num lock => 144
// AltGr key => 225
var excludedKeys = [
16, 17, 18, 20, 35, 36, 37,
38, 39, 40, 45, 144, 225
];
if ( event.which === 9 && this.elementValue( element ) === "" || $.inArray( event.keyCode, excludedKeys ) !== -1 ) {
return;
} else if ( element.name in this.submitted || element.name in this.invalid ) {
// Here is the part where the delay is added.
// In this example, the delay time is 1000ms.
var temp_obj = this;
delay(function(){
temp_obj.element( element );
}, 1000);
}
},
rules: {
name: {
required: true,
ruleName: true
}
}
});
source to share