JQuery 验证 - 为 keyup 验证添加延迟

Question

我正在使用 JQuery 验证插件 来验证我的表单，我想在之前添加 500 毫秒 的延迟正在验证输入，因为它会导致错误标签出现和消失得非常快。

我想得到 JQuery 验证插件相关的答案，而不仅仅是 JQuery 一个。

例如，当最小长度为2个字符时，我希望它在显示之前有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>

请记住，我有一个包含很多输入的表单，因此我需要一个通用的解决方案，我尝试在 highlight 中添加一个 timeout和 错误放置 ，但这导致使用 自定义方法 .

的输入出现意外行为

Answer 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 秒以高度证明这种情况。

JQuery 验证 - 为 keyup 验证添加延迟

JQuery Validate - Add delay to keyup validation

jquery

jquery-validate