Rails4ClientSideValidation :

Callbacks

Note: If ClientSideValidations does not work in your case due to rails version, use Rails4ClientSideValidations instead for rails-4

ClientSideValidations will run callbacks based upon the state of the element or form. The following callbacks are supported:

  • ClientSideValidations.callbacks.element.after(element, eventData)
  • ClientSideValidations.callbacks.element.before(element, eventData)
  • ClientSideValidations.callbacks.element.fail(element, message, callback, eventData)
  • ClientSideValidations.callbacks.element.pass(element, callback, eventData)
  • ClientSideValidations.callbacks.form.after(form, eventData)
  • ClientSideValidations.callbacks.form.before(form, eventData)
  • ClientSideValidations.callbacks.form.fail(form, eventData)
  • ClientSideValidations.callbacks.form.pass(form, eventData)

The names of the callbacks should be pretty straight forward. For example, ClientSideValidations.callbacks.form.fail will be called if a form failed to validate. And ClientSideValidations.callbacks.element.before will be called before that particular element’s validations are run.

All element callbacks will receive the element in a jQuery object as the first parameter and the eventData object as the second parameter. ClientSideValidations.callbacks.element.fail() will receive the message of the failed validation as the second parameter, the callback for adding the error fields as the third and the eventData object as the third. ClientSideValidations.elementValidatePass() will receive the callback for removing the error fields. The error field callbacks must be run in your custom callback in some fashion. (either after a blocking event or as a callback for another event, such as an animation)

All form callbacks will receive the form in a jQuery object as the first parameter and the eventData object as the second parameter.

Here is an example callback for sliding out the error message when the validation fails then sliding it back in when the validation passes:

// You will need to require 'jquery-ui' for this to work
window.ClientSideValidations.callbacks.element.fail = function(element, message, callback) {
  callback();
  if (element.data('valid') !== false) {
    element.parent().find('.message').hide().show('slide', {direction: "left", easing: "easeOutBounce"}, 500);
  }
}

window.ClientSideValidations.callbacks.element.pass = function(element, callback) {
  // Take note how we're passing the callback to the hide()
  // method so it is run after the animation is complete.
  element.parent().find('.message').hide('slide', {direction: "left"}, 500, callback);
}

Example:

/**
 * 'Before' Callback of rails4clientsidevalidation plugin
 * @param element
 * @param message
 */
window.Rails4ClientSideValidations.callbacks.element.before = function(element, message) {
  // If validating element is zip_code field then just remove the underscores from content
  if($(element).attr('id').indexOf('zip_code')){
    // Replace all non numeric characters from the fields
    var newContent = $(element).val().replace(/\D/g,'');
    $(element).val(newContent);
  }
};

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s