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 (e.g. "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 (i.e. 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.");
    }
}});