Using Bootstrap Tooltip to show Parsley validation errors

I'm currently working on a web application using a variety of different frameworks, such as Backbone for the back-end, Bootstrap for the front-end and Parsley for client side form validation. Parsley is a really powerful validation toolkit, but it takes some tweaking to make it blend with the Bootstrap front-end. Fortunately this is a one time fix, which can be re-used all over our project.

Since there will be some custom options in our Parsley object, we can't use the default parsley-validate attribute on the form. Instead we have to initialize the validation with the jQuery syntax:

$('#my-form').parsley(parsleyOptions);

The options are were the magic happens, and in our case we have a global options object that our forms use to get the same experience all over the application. Here's what it looks like:

var parsleyOptions = {
  // Sets success and error class to Bootstrap class names
  successClass: 'has-success',
  errorClass: 'has-error',

  // Bootsrap needs success/error class to be set on parent element
  errors: {
    classHandler: function(el) {
      return el.parent();
    },
    // Set these to empty to make sure the default Parsley elements are not rendered
    errorsWrapper: '',
    errorElem: ''
  },
  listeners: {
    // Show a tooltip when a validation error occurs
    onFieldError: function (elem, constraints, parsleyField) {
      elem.tooltip({
        animation: false,
        container: 'body',
        placement: 'top',
        title: elem.data('error-message')
      });
    },
    // Hide validation tooltip if field is validated
    onFieldSuccess: function(elem, constraints, parsleyField) {
      elem.tooltip('destroy');
    }
  }
};

There are, of course, some caveats with this approach. By default, Parsley has a fallback to some default error messages and multiple validation errors is normally shown if there are multiple errors. The approach above reguires the data-error-message attribute on all validated fields and only one message for each field will be displayed.