Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Formatting Rails form elements for Twitter Bootstrap error validation
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
form_fields = [
'textarea',
'input',
'select'
]
elements = Nokogiri::HTML::DocumentFragment.parse(html_tag).css "label, " + form_fields.join(', ')
elements.each do |e|
if e.node_name.eql? 'label'
html = %(<div class="control-group error">#{e}</div>).html_safe
elsif form_fields.include? e.node_name
if instance.error_message.kind_of?(Array)
html = %(<div class="control-group error">#{html_tag}<span class="help-inline">&nbsp;#{instance.error_message.join(',')}</span></div>).html_safe
else
html = %(<div class="control-group error">#{html_tag}<span class="help-inline">&nbsp;#{instance.error_message}</span></div>).html_safe
end
end
end
html
end
// 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;
}
@t2

This comment has been minimized.

Copy link

commented May 9, 2012

Nice!

@amnesia7

This comment has been minimized.

Copy link

commented May 30, 2012

I don't think this code is quite right. It seems to wrap the label and input elements in div.control-group tags but the the label+input are already within a div.control-group tag so it breaks styling on the page.

I think the control-group part needs removing and the .error class should be applied by going up the DOM from the label (because that has div.control-group as its parent) and use add_class to add the .error class to that div.

Something like the following but it doesn't work. I need someone with some knowledge of nokogiri to correct it (I only started using it an hour ago):

  elements.each do |e|
    if e.node_name.eql? 'label'
      html = %(#{e.parent.add_class('error')}).html_safe
    elsif form_fields.include? e.node_name
      if instance.error_message.kind_of?(Array)
        html = %(#{html_tag}<span class="help-inline">&nbsp;#{instance.error_message.join(',')}</span>).html_safe
      else
        html = %(#{html_tag}<span class="help-inline">&nbsp;#{instance.error_message}</span>).html_safe
      end
    end
  end
  html
@tomwang1013

This comment has been minimized.

Copy link

commented Jun 27, 2012

This solution is not perfect:

  1. the left label is not in error color
  2. after adding a "control-group", the whole form gets larger

The best solution is jquery, justing add "error" class to the grandfather div, but it is not easy.

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.