Question

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

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

例如，当最小长度为2个字符时，我希望它在显示错误标签+红色边框之前有500毫秒的延迟。 /> （如果在我的代码片段中它不起作用，请尝试在有3个字符的情况下提交表单，然后在该类型1字符后提交。）

＆＃13;

$(document).ready(function() { 
    $("#myForm").validate({
        debug:true,
        rules: {
            userName: { 
              required: true,
              minlength: 2
            }
        },
        submitHandler: function(form) 
        { 
           alert("pass validation");
        }
  });   
  
  
});

＆＃13;

<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>

＆＃13;

请注意，我有一个包含许多输入的表单，所以我需要一个通用解决方案，我尝试在突出显示和错误放置中添加超时 strong>，但这导致使用自定义方法的输入产生意外行为。

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
    }, 
    ....

DEMO ：jsfiddle.net/yf0ayLnv/

然而，这种方法仍然需要一些工作。在您调用并清除验证错误时，有些情况下计时器仍在运行。我将计时器留在3秒钟以高度证明这种情况。

JQuery验证 - 为密钥验证添加延迟

1 个答案: