Customize Field Errors with Rails 5 and Bootstrap

customize_error.rb

# Adapted from https://rubyplus.com/articles/3401-Customize-Field-Error-in-Rails-5
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  html = ''

  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 = %(#{e}).html_safe
    elsif form_fields.include? e.node_name
      e['class'] += ' is-invalid'
      if instance.error_message.kind_of?(Array)
        html = %(#{e}<div class="invalid-feedback">#{instance.error_message.uniq.join(', ')}</div>).html_safe
      else
        html = %(#{e}<div class="invalid-feedback">#{instance.error_message}</div>).html_safe
      end
    end
  end
  html
end

Thanks @simonneutert I've reduce it even further:

ActionView::Base.field_error_proc = proc do |html_tag, instance|
  def format_error_message_to_html_list(instance)
    messages = [*instance.error_message].map { |msg| "<li>#{msg}</li>" }
    return unless messages.present?

    "<div class='invalid-feedback'><ul>#{messages.join('')}</ul></div>"
  end
  html_tag + format_error_message_to_html_list(instance).html_safe
end

Is there a reason not to use Nokogiri (since it's a Rails dependency)? Maybe it's slower?
In Rails 7 I could reduce this whole String manipulation with RegExes with:

# config/application.rb
...

config.action_view.field_error_proc = proc do |html_tag, instance|
  input_tag = Nokogiri::HTML5::DocumentFragment.parse(html_tag).at_css('.form-control')
  if input_tag
    input_tag.add_class('is-invalid').to_s.html_safe
  else
    html_tag
  end    
end

Next step for me is adding the error messages on a sibling '.invalid-feedback' element.

These are great, thank you!

Not sure what's changed in the intervening time, but I had to combine the last 2 answers to get it working with Rails 8 and BS 5.3.

  if  html_tag.include?("<label")
    # return the label without modification
    html_tag
  else
    def format_error_message_to_html_list(instance)
      messages = [*instance.error_message].map { |msg| "<li>#{msg}</li>" }
      return unless messages.present?

      "<div class='invalid-feedback'><ul>#{messages.join('')}</ul></div>"
    end

    input_tag = Nokogiri::HTML5::DocumentFragment.parse(html_tag)
    input_tag.children.add_class('is-invalid')
    input_tag.add_child(format_error_message_to_html_list(instance).html_safe)
    input_tag.to_s.html_safe
  end

I tried adding sibling with Nokogiri, but I couldn't get it. edit, it works now

Edit: Not all the invalid-feedback will be visible on the page (Bootstrap styling I'm guessing). Specifically in the example above it will not display for select boxes that error. Adding d-block to invalid-feedback makes them display all the time. Old Issue for old version, but still seems to be an issue with current version: twbs/bootstrap#29439

One thing to be aware of if you decide to go the way of calling .at_css is that you will need one for each of the 4 input types that Bootstrap currently classes (form-control, form-select, from-check-input and form-range)

@nicholasshirley do you need to call .html_safe both on the .add_child and when returning the complete input_tag?

I would expect it to only be necessary on the last line, but I can be wrong (which is not a rare occurrence).