Skip to main content

Posts

Showing posts from December, 2013

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',  // Bo…