Wait for user input and validate not working

Question

I'm attempting to make a function that checks the validity of an input field, but I'm running into the problem that if I type too quickly and then hit tab, it doesn't fire the event and the field isn't validated. I've tried a few combinations of keyup, keydown, blur, focus, and focusout, but nothing has worked.

I have used blur previously, but the problem with blur is that on the last input for their email address, it won't fire because they shouldn't tab away from email and blur the box.

This is the code that I'm using currently. It works when I wait, but if I type in "John" and then hit tab immediately, it doesn't validate it.

$(function()
{
    var timer;
    // First name
    $('input[name="firstName"]').on('keydown',function(event)
    {
            clearTimeout(timer);
            timer = setTimeout(function() 
            {
                validate(/^[A-Za-z]*$/, 'firstName', 'firstName')
            }, 800);
    });
    // Last name
    $('input[name="lastName"]').on('keydown',function(event){
            clearTimeout(timer);
            timer = setTimeout(function() 
            {
                validate(/^[A-Za-z]*$/, 'lastName', 'lastName')]
            }, 800);
    });
    // Email
    $('input[name="email"]').on('keydown',function(event){
            clearTimeout(timer);
            timer = setTimeout(function() 
            {
                validate(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, 'email', 'email')
            }, 800);
    });
}

Any ideas on what I should do?

Answer 1

Run the function right away on blur. One way is to use 0 with setTimeout, better way to break it out to a function call and call the function.

$('input[name="firstName"]').on('keydown blur',function(event)
{
        clearTimeout(timer);
        timer = setTimeout(function() 
        {
            validate(/^[A-Za-z]*$/, 'firstName', 'firstName')
        }, event.type==="blur" ? 0 : 800 );
});

Answer 2

Others have already given the solution to the problem, but there is a slight refactor that would make this easier on yourself. Since it looks like every event handler is basically doing the same thing, you could separate out the validations and simply havie a single event handler for the form which delegates to all the child inputs giving you a bit more performance too (less event handlers).

var validations = {
  firstName: /^[A-Za-z]*$/,
  lastName: /^[A-Za-z]*$/, 
  email: ...
};

$('form').on('keypress input change blur', 'input[name]', function(event) {
  clearTimeout(timer);
  timer = setTimeout(function() {
    key = e.name;
    validate(validations[key], key, key);
  }, event.type in ['blur', 'input', 'change'] ? 0 : 800 );
});

Answer 3

You can validate the field on the blur event as well. Blur fires when the field loses focus like when you tab to the next field.

Maybe like:

$('input[name="firstName"]').on('keydown',function(event)
{
        clearTimeout(timer);
        timer = setTimeout(function() 
        {
            validate(/^[A-Za-z]*$/, 'firstName', 'firstName')
        }, 800);
}).on('blur',function(event)
{
        clearTimeout(timer);
        validate(/^[A-Za-z]*$/, 'firstName', 'firstName');
});

Answer 4

Use keyup or keypress instead of keydown . keydown is fired before the input has actually made it's way to the control, so the value isn't updated yet. keyup and keypress both fire after the value has been entered.

Better still, bind to input and change as well. This will cover your bases for when users enter input by copy and paste or drag and drop.

$('input[name="firstName"]').on('keypress input change', function(event)
{
    validate(/^[A-Za-z]*$/, 'firstName', 'firstName')
});

Answer 5

validate on blur, like you have been doing, but then validate AGAIN on form submit to make sure that you get that last field as well as any that didn't validate because of tabbing away too quickly. Since you're doing it client-side, the processing time is minimal.