jQuery Plugins

Javier Espinoza edited this page Jul 1, 2016 · 9 revisions

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
})

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:

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