validating user input when user finished typing

Question

what is the best way to validate user input for a a text field when the user is done typing? I am using javascript/jquery. is there a method that knows when the user has clicked out of the text field?

score 2 · Answer 1 · answered Apr 25 '12 at 18:51

2

Implement onblur event handler on the textfield which will be triggered when the user tabs out to next field.

Using jQuery,

$('.input_selector').on ('blur', function() {
    var inpValue = $(this).val();
    //validate Code
});

answered Apr 25 '12 at 18:51

Selvakumar Arumugam

79,297
15
120
134

i can't help but notice that on the page load, this onblur automatically runs. is there any way around this? – droidus Apr 25 '12 at 20:17
Do you set focus to any of the input elements? Try wrapping the code inside `$(function () { /*above code*/ });` – Selvakumar Arumugam Apr 25 '12 at 20:18
sorry, had autofocus on. is there any way to get around this so i can do autofocus, without running the function to validate? would i run a counter, so if it's 0, don't do anything ... else, validate? – droidus Apr 25 '12 at 20:25
@droidus On page load, Do you have focus set on one field and then you change focus to some other field? Yes, you can use a flag or counter to determine to avoid that – Selvakumar Arumugam Apr 25 '12 at 20:30
@droidus `onblur` event will be executed when a text field in focus loses its focus. If it complicated, simply use flag/counter as you suggested. – Selvakumar Arumugam Apr 25 '12 at 20:38

score 0 · Answer 2 · edited May 23 '17 at 10:29

For all those who came here looking for a solution, please check this answer.

Basically:

The solution below solves this problem and will call X seconds after finished as the OP requested. It also no longer requires the redundant keydown function. I have also added a check so that your function call won't happen if your input is empty.

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 seconds for example

//on keyup, start the countdown
$('#myInput').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#myInput').val()) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing", do something
function doneTyping() {
    //do something 
}

All credit for the guy who originally posted this answer, just copying in case somebody arrived here (as I did) looking for a solution.

validating user input when user finished typing

2 Answers2