[Edit: March 3, 2013 - The script I have below to get client side validations working with Twitter Bootstrap is no longer need with a recent version of the client_side_validations-simple_form gem. The following gem configuration should work just fine (later versions should be fine too):
gem 'simple_form', '2.0.4'
gem 'client_side_validations', '3.2.1'
gem 'client_side_validations-simple_form', '2.0.1'
Be sure to preserver the order. You'll also need to add "//= require rails.validations.simple_form" right after "//= require rails.validations" in your appication.js file. See gem's github page for more info. Thanks to Chris Beck for the heads up on this. - Darren Smith]
I’ve been keeping an eye for a good client side validation gem that works with Twitter Bootstrap and allows you to use Rail’s model validation helpers. While I haven’t found a gem that combines those things, I have found a solution. You’ll need Twitter Bootstrap 2, SimpleForm 2.0, and Client Side Validations 3.2.0.beta.3. The versions are important. It is possible that this solution will work with different versions, but the versions stated have been tested. I’ll assume you already have Twitter Bootstrap installed or at least know how it to. If not, please visit http://twitter.github.com/bootstrap/ or install via a gem which you can find here. Next, add the following two lines to your gem file and run bundle install.
gem 'client_side_validations', '3.2.0.beta.3', :git => 'https://github.com/bcardarella/client_side_validations.git'
gem 'simple_form', '2.0'
You’ll now need to run generator commands for both gems:
Simple Form (the bootstrap option refers to Twitter Bootstrap)
rails generate simple_form:install --bootstrap
Client Side Validations
rails g client_side_validations:install
Next you’ll want to add validations script to the application.js file so that it can be loaded. Do this before the //= require_tree . entry.
//= require rails.validations
Now you’ll need to add a special script to get Client Side Validations to work with Twitter Bootstrap. I got this script from some comments on an issue of Client Side Validations on Github. You can add this script to your javascripts folder and name it whatever you like. The script does use jQuery, so that’ll be required to use the script as-is. For different application.js setups, just make sure that this script will get executed after rails.validations.
(function() {
$(document).ready(function() {
return $("div.control-group").focusout(function() {
if (!$("div.control-group").hasClass("error")) {
return $(this).addClass("success");
}
});
});
}).call(this);
ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
add: function(element, settings, message) {
var errorElement, wrapper;
settings.wrapper_tag = ".control-group";
settings.error_tag = "span";
settings.error_class = "help-inline";
settings.wrapper_error_class = "error";
settings.wrapper_success = "success";
if (element.data('valid') !== false) {
wrapper = element.closest(settings.wrapper_tag);
wrapper.removeClass(settings.wrapper_success);
wrapper.addClass(settings.wrapper_error_class);
errorElement = $("<" + settings.error_tag + "/>", {
"class": settings.error_class,
text: message
});
return wrapper.find(".controls").append(errorElement);
} else {
wrapper = element.closest(settings.wrapper_tag);
wrapper.addClass(settings.wrapper_error_class);
return element.parent().find("" + settings.error_tag + "." + settings.error_class).text(message);
}
},
remove: function(element, settings) {
var errorElement, wrapper;
settings.wrapper_tag = ".control-group";
settings.error_tag = "span";
settings.error_class = "help-inline";
settings.wrapper_error_class = "error";
settings.wrapper_success = "success";
wrapper = element.closest("" + settings.wrapper_tag + "." + settings.wrapper_error_class);
wrapper.removeClass(settings.wrapper_error_class);
wrapper.addClass(settings.wrapper_success);
errorElement = wrapper.find("" + settings.error_tag + "." + settings.error_class);
return errorElement.remove();
}
};
Now you should be all set up to start creating forms using SimpleForm, Twitter Bootstrap, and Client Side Validations. When creating a form you need to pass in :validate => true to the simple_form_helper.
<%= simple_form_for @car, :validate => true do |f| %>
To see all of this in action clone my example project on github.
I hope this helps anyone who was in the same predicament as me… wanting to do client-side validations using Rails model validators with Twitter Bootstrap. The information from this post was pulled together from comments on an issue from the Client Side Validations Github site. I know this isn’t the perfect solution, but it does work, contributes to a good user experience, and keeps code DRY.
