Custom HTML Error Wrappers for Form Elements

Question

I would like to find a way to customize the default error html

<div class="field_with_errors"></div>

To take my own classes:

     <div class="clearfix error">
        <label for="errorInput">Input with error</label>
        <div class="input">
          <input class="xlarge error" id="errorInput" name="errorInput" size="30" type="text">
          <span class="help-inline">Small snippet of help text</span>
        </div>
      </div>

I have found this railscast from 2007 which uses Rails 2, I believe. http://railscasts.com/episodes/39-customize-field-error. It seems like Rails 3 might have a more friendly way to customize this html?

Also, it doesn't show a way to just add an error class directly to the input like I want.

Answer 1

The method explained in the link you posted is still used today with the vanilla form builders in Rails.

So, if you wanted to wrap your input like you mention, create a method overriding the ActionView::Base.field_error_proc in your environment.rb file for example, like so:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  if instance.error_message.kind_of?(Array)
    %(<div class="form-field error">#{html_tag}<small class="error">&nbsp;
      #{instance.error_message.join(',')}</small></div).html_safe
  else
    %(<div class="form-field error">#{html_tag}<small class="error">&nbsp;
      #{instance.error_message}</small></div).html_safe
  end
end

In the above code, I'm wrapping my input (the #{html_tag}) in a <div class="form-field error>..</div> that's the default used by ZURB Foundation. I'm also using a <small class="error">...</small tag (which is also the foundation default) to display the messages below the input.

However, I recommend using a form builder gem like simple_form. It cleans up your view code quit a bit and allows for the level of customization you require.

Check out the railscast on it here.

Good luck!