Как задержать событие onkeyup в плагине проверки jQuery

Question

У меня есть форма, которая использует плагин проверки jQuery для проверки своих полей. В одном из этих полей проверка выполняется с помощью ajax. Проблема в том, что каждый штрих клавиши запускает это правило проверки и, следовательно, делает вызовы ajax, чего я не хочу. Теперь я могу отключить onkeyup для этого поля, но я бы предпочел иметь задержку в 5 секунд после того, как пользователь наберет, а затем вызвать мое пользовательское правило, которое содержит метод ajax.

Я искал какое-то время, натолкнулся на это How to delay the .keyup() handler until the user stops typing?, но не знаю, как его использовать с плагином проверки. Может кто-нибудь помочь мне понять это?

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 
    } 
    } 
}); 

Answer 1

Вы можете изменить функцию OnKeyUp, но это будет иметь эффект на всех полей в форме, так как у вас есть задержки в каждом поле или у вас нет задержки.

С jquery.validate.js по умолчанию 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) { 
       // Do nothing 
       return; 
      } else if (element.name in this.submitted || element.name in this.invalid) { 
       // Start validation 
       this.element(element); 
      } 
     }, 

, если вы хотите добавить задержку перед проверкой вам нужно изменить код

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 
    } 
    } 
});