LiveValidation issues with Datepicker

Question

I am working with LiveValidation.js which works perfectly with everything in my form apart from fields with the bootstrap datepicker.

The date field does not validate correctly when the date has been selected from the datepicker, however when you select back into the field and then back out (without changing anything) the form correctly validates.

If you remove autoclose: true, from the datepicker script, the form will validate after you have selected the date and then clicked somewhere else on the page to close the datepicker dropdown although as soon as you have selected a date, the validation error message flashes up and then clears until you click out to validate.

It seems like there is some problem with when the date field is validating or the state of the content of the box at time of validation. I wonder if there is a way to change when the field validates to be only when the entire field looses focus?

Any help would be greatly appreciated.

Answer 1

I've just faced this same issue. The problem is that LiveValidation will only fire the validation when it gets an onkeyup event, which is not fired when you select a date from the datepicker. You need to spoof this in the datepicker's onSelect property.

For example:

$('.datepicker').datepicker({
            onSelect: function () {
                var e = $.Event("keyup");
                e.keyCode = 13;
                $(this).trigger(e);
            }
        }
    );