public
Last active

Formatting Rails form elements for Twitter Bootstrap error validation

  • Download Gist
application.rb
Ruby
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
html = %(<div class="field_with_errors">#{html_tag}</div>).html_safe
# add nokogiri gem to Gemfile
elements = Nokogiri::HTML::DocumentFragment.parse(html_tag).css "label, input"
elements.each do |e|
if e.node_name.eql? 'label'
html = %(<div class="clearfix error">#{e}</div>).html_safe
elsif e.node_name.eql? 'input'
if instance.error_message.kind_of?(Array)
html = %(<div class="clearfix error">#{html_tag}<span class="help-inline">&nbsp;#{instance.error_message.join(',')}</span></div>).html_safe
else
html = %(<div class="clearfix error">#{html_tag}<span class="help-inline">&nbsp;#{instance.error_message}</span></div>).html_safe
end
end
end
html
end
your_controller.css.scss
SCSS
1 2 3 4 5 6 7
// Place all the styles related to the YourController controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
 
form .clearfix:before, form .clearfix:after {
display: inline;
}

Wow, great, it works excellent, thank you very much Trent!

Glad it helped!

I forked your version to https://gist.github.com/2645498 and it now does also textarea validation with latest Bootstrap.

The error message is below the error field, i.e. in a second line. How to place it in the same line as the error field?

This is great, thanks.

Forked to https://gist.github.com/dustMason/5817510 for Zurb Foundation 4. This version removes the Nokogiri dependency and thus performs better.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.