JQuery Validate — добавление задержки для проверки ключа

Я использую плагин jQuery validate для проверки моей формы, и я хотел бы добавить задержку в 500 мс перед проверкой ввода, потому что это заставляет метку ошибки появляться и исчезать очень быстро.

Я хотел бы получить ответ, который связан с плагином jQuery Validate, а не только с jQuery.

Например , когда есть минимальная длина 2 char, я хотел бы, чтобы у него была задержка 500 мс перед отображением метки ошибки + красная граница.
(Если в моем фрагменте он не работает, попробуйте отправить форму, когда у нее есть 3 символа и после этого введите 1 символ.)

$(document).ready(function() { 
    $("#myForm").validate({
        debug:true,
        rules: {
            userName: { 
              required: true,
              minlength: 2
            }
        },
        submitHandler: function(form) 
        { 
           alert("pass validation");
        }
  });   
  
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

  
<form id="myForm">
    <input type="text" name="userName" placeholder="enter your name" value=""</>
    <input type="submit" name="submit" value="submit"/>
</form>

Имейте в виду, что у меня есть форма со многими входами , поэтому мне нужно универсальное решение, я пытался добавить тайм-аут внутри выделения и размещения ошибок, но это вызвало неожиданное поведение к входам с пользовательскими методами .

1 ответ

  1. Просто оберните функцию по умолчанию onkeyupв setTimeout()функцию…

    $("#myForm").validate({
        onkeyup: function(element, event) {
            var t = this;
            setTimeout(function() {
                // this is the default function
                var excludedKeys = [
                    16, 17, 18, 20, 35, 36, 37,
                    38, 39, 40, 45, 144, 225
                ];
                if (event.which === 9 && t.elementValue(element) === "" || $.inArray(event.keyCode, excludedKeys) !== -1) {
                    return;
                } else if (element.name in t.submitted || element.name in t.invalid) {
                    t.element(element);
                } // end default
            }, 3000);  // 3-second delay
        }, 
        ....
    

    Демо : jsfiddle.net/yf0ayLnv/

    Однако этот подход все еще требует определенной работы. Существуют сценарии, в которых таймер все еще работает, пока вы вызываете и очищаете ошибку проверки. Я оставил таймер на 3 секунды, чтобы продемонстрировать это состояние.