How to call a function AFTER blur from input?

Question

I'm using jquery-ui datepicker as one of my inputs. If a user blurs from an input, I display a relevant message (eg "This field is required"). For this purpose I have the following jQuery, which works perfectly fine for simple <select> and <input type="text"> tags:

$("input").blur(function(){
    if($(this).val()=="")
        $(this).next().text("This field is required.");
    else
        $(this).next().text("");
});

However, in case of datepicker (where I have to essentially blur to select a date) the error message gets displayed even after I've selected the date (ie selection of date is leading to the blur event). This requires that the .blur(function(){}); should be called after the blur event is completed (not simultaneously).

How to solve this situation?

Here's a DEMO .

Answer 1

You could add your validation check to the onClose event of the datepicker, rather than the blur event of the input field:

$("#datepicker").datepicker({onClose: function(selectedDate) {
    if(!selectedDate) {    
        $(this).next().text("This field is required.");
    }
}});

Answer 2

Kind of a hack, but you could just delay the check with setTimeout :

$("input").blur(function () {
    var $t = $(this);
    setTimeout(function () {
        if ($t.val() == "") $t.next().text("This field is required.");
        else $t.next().text("");
    }, 100);
});

http://jsfiddle.net/D4AGz/96/