Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Script to Make Client Side Validations Work w/ Twitter Bootstrap & Simple Form
(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();
}
};
@keilmillerjr

Thank you so much! It worked perfectly!

As per comment on this blog post: http://www.ddarrensmith.com/blog/2012/05/17/ruby-on-rails-client-side-validation-with-validation-helpers-and-twitter-bootstrap/

If you want to use this with current stable version of client side validations (3.1.4)
You have to change this line
ClientSideValidations.formBuilders['SimpleForm::FormBuilder']
to
clientSideValidations.formBuilders['SimpleForm::FormBuilder']

@ccmcbeck

You might also need to change the name of the formBuilder if you subclass CustomFormBuilder < SimpleForm::FormBuilder

@Tomanow
Tomanow commented Apr 17, 2013

Thank you for this!

@AlJohri
AlJohri commented Aug 11, 2013

Does this work for Bootstrap 3?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.