Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

keilmillerjr commented Aug 3, 2012

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

This comment has been minimized.

Copy link

ccmcbeck commented Nov 28, 2012

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

@Tomanow

This comment has been minimized.

Copy link

Tomanow commented Apr 17, 2013

Thank you for this!

@AlJohri

This comment has been minimized.

Copy link

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
You can’t perform that action at this time.