JQuery Validate - Add delay to keyup validation

Question

I am using JQuery validate plugin to validate my form and I would like to add a delay of 500ms before an input is being validated because it causes the error label to appear and disappear really fast.

I would like to get an answer that is JQuery Validate plugin related and not just a JQuery one.

For example , when there is min length of 2 char, I would like it to have a delay of 500ms before showing the error label + red border.
(If in my snippet it doesn't work, try to submit the form when it has 3 chars and after that type 1 char.)

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

Keep in mind I have a form with many inputs so I need a generic solution, I tried adding a timeout inside the highlight and error placement, but that caused to an unexpected behavior to inputs with custom methods.

Possible duplicate of [jQuery .keyup() delay](http://stackoverflow.com/questions/1909441/jquery-keyup-delay) — tremendows, Dec 28 '16 at 13:49
take a look here: http://stackoverflow.com/questions/1909441/jquery-keyup-delay — tremendows, Dec 28 '16 at 13:53
[There is no flicker and there is no red border](http://jsfiddle.net/vfyn4akq/). Please provide code that actually demonstrates this issue. — Sparky, Dec 28 '16 at 16:47
Even when I add a red border to your code, I still do not see any flickering: http://jsfiddle.net/vfyn4akq/1/ — Sparky, Dec 28 '16 at 16:49
@Sparky submit when it's empty, then start typing, you will see that when you just enter 1 char the error of minimum length jumps and disappear after you enter the second char. — Offir, Dec 28 '16 at 17:22
By flickering I mean that the label appear and disappear really fast between 1 char to 2 char. — Offir, Dec 28 '16 at 17:23
That's not "flicker"... it's supposed to show the error message when less than 2 characters and then remove the error message when satisified. Have you attempted to [over-ride the `onkeyup` option with a custom function](https://jqueryvalidation.org/validate/#onkeyup) yet? — Sparky, Dec 28 '16 at 17:25
@Sparky I didn't know how to do it, I want to put in this function a time out for 1 second, can you help me with that? Sorry for the wrong definition ,I wasn't sure how to call it. — Offir, Dec 28 '16 at 17:31
Not sure why you're having trouble. Look at the source code for the default function and then delay it with a timer. — Sparky, Dec 28 '16 at 18:06
@Sparky, I was working with the minified question, but for further future that what I shall do. — Offir, Dec 28 '16 at 18:48
Just look at the un-minified version? Everything is posted on the developer's website and GitHub page. — Sparky, Dec 28 '16 at 19:14
@Sparky give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime. — Offir, Dec 29 '16 at 07:45

Sparky · Accepted Answer · 2016-12-28T18:11:47.900

Simply wrap the default onkeyup function in a setTimeout() function...

$("#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/

However, this approach still needs some work. There are scenarios where the timer is still running while you invoke and clear the validation error. I left the timer at 3 seconds to highly demonstrate this condition.

Can you take a look please. https://stackoverflow.com/questions/62554791/jquery-validation-with-net-core-try-to-validate-hidden-fields-cancel-validati — Offir, Jun 24 '20 at 12:29

JQuery Validate - Add delay to keyup validation

1 Answers1