How to change the default rails error div “field_with_errors”

Question

I\'m using sorcery for authentication along with twitter bootstrap.

I\'d like to style my error messages on my signup form in the style of twitter\'s bootstrap by ch

Answer 1

From the link above, if you put the following inside class Application < Rails::Application of config/application.rb

config.action_view.field_error_proc = Proc.new { |html_tag, instance| 
  "<div class=\"field_with_errors control-group error\">#{html_tag}</div>".html_safe
}

Your input tags will have a red marker around them whenever validation fails

Answer 2

Note that if you are using SimpleForm, the accepted answer of using a Proc in application.rb won't work. Instead, you should edit the simple_form initializer. For example using Bootstrap 3.2:

config.wrappers :default, class: :input,
  hint_class: :field_with_hint, error_class: :'has-error' do |b|
  [...]
  b.use :hint,  wrap_with: { tag: :span, class: :'text-warning' }
  b.use :error, wrap_with: { tag: :span, class: :'text-danger' }
end

Answer 3

I wanted to turn off the errors only for checkboxes, so I did this:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  doc = Nokogiri::HTML::Document.parse(html_tag)
  if doc.xpath("//*[@type='checkbox']").any?
    html_tag
  else
    "<div class=\"field_with_errors\">#{html_tag}</div>".html_safe
  end
end

Answer 4

Twitter Bootstrap 3.3.6 on Rails 5, this goes in an initializer customize_error.rb and works for me:

ActionView::Base.field_error_proc = proc { |html_tag, _instance| "<div class=\"has-error\">#{html_tag}</div>".html_safe }

Answer 5

Using Rails 6 with Bootstrap 4 you'll need to add the is-invalid class. Without getting too fancy I just did:

ActionView::Base.field_error_proc = proc do |html_tag, instance|
  html_tag.gsub("form-control", "form-control is-invalid").html_safe
end

Answer 6

For Bootstrap 3.2 you could use sth. like this (add nokogiri gem to your Gemfile):

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 has-error">#{e}</div>).html_safe
    elsif form_fields.include? e.node_name
      if instance.error_message.kind_of?(Array)
        html = %(<div class="control-group has-error">#{html_tag}<span class="help-block">&nbsp;#{instance.error_message.uniq.join(', ')}</span></div>).html_safe
      else
        html = %(<div class="control-group has-error">#{html_tag}<span class="help-block">&nbsp;#{instance.error_message}</span></div>).html_safe
      end
    end
  end
  html
end

Place this code inside config/initializers/field_error_proc.rb file (create one if not exists)

This is slightly modified code from: Overriding ActionView::Base.field_error_proc in Rails