jQuery Plugins

jQuery Plugins

jQueryUI DatePicker

If you are using jQuery DatePicker in a field and trying to validate it with Client Side Validations it won't work, because it doesn't trigger the "change" or "focusout" events from the field. To fix it just add this option on the DatePicker:

onClose: function(dateText, inst) { $(inst.input).change().focusout(); }

Example:

$(".date_fields").datePicker({
  onClose: function(dateText, inst) { $(inst.input).change().focusout(); },
  changeMonth: true,
  changeYear: true
})

jQueryUI Autocomplete

The "change" & "focusout" events are not fired upon selection. Modify the select event to write the value to the input (over-ridding the event cancels this default behavior) and trigger these events.

input_el.autocomplete({
        source: input_el.data('autocomplete-source'),
        select: function (evt, ui) {
            $(this).val(ui.item.value);
            $(this).change().focusout();
        }
    });

Bootstrap Datepicker Rails

If you are using Bootstrap Datepicker Rails in a field and trying to validate it with Client Side Validations it won't work because it doesn't trigger the "change" or "focusout" events from the field. To fix it just add this event to the datepicker:

.on('changeDate', function(ev){$(ev.target).find('input').change().focusout();});

Example:

$('.date').datepicker({'format': 'dd-mm-yyyy'})
    .on('changeDate', function(ev){
        $(ev.target).find('input').change().focusout();
    });

jQuery maskedinput

If you are using jQuery maskedinput in a field and trying to validate it with Client Side Validations it wont work, because it doesn't trigger the "change" or "focusout" events from the field. To fix it you'll need to attach a blur.mask event handler:

$('.masked_field').mask('99/99/9999').bind('blur.mask', function() {
  $(this).change().focusout();
});

Bootstrap Datetimepicker 3

It seems that bootstrap datetimepicker 3 eats change events, so to configure it is slightly different:

$(".datetimepicker")
.on('dp.change', function(ev){$(ev.target)
.trigger("change.ClientSideValidations")
.trigger("focusout.ClientSideValidations");});