Setting up error message html view in this way?

Question

I'm using Twitter-Bootstrap and want to generate the correct html to display the error view how it does it on the main site, which is:

The html for the above field is:

<div class="control-group error">
 <label for="inputError" class="control-label">Input with error</label>
  <div class="controls">
   <input type="text" id="inputError">
  </div>
</div>

Note: I deleted Please correct the error, <span>, I just want the input field and label.

And if I was to use my sign up page as an example, the email field, it would be:

<div class="control-group">
 <label for="user_email" class="control-label">Email*</label>
  <div class="controls">
   <input type="email" value="" name="user[email]" id="user_email" class="span3">
  </div>
</div>

What do I have to do to get it to function like the former?

Answer 1

Don't re-invent the wheel. Use simple_form. The current version of the gem allows you to do the following:

rails generate simple_form:install --bootstrap

With that, you can use the simple_form helpers. They will generate the right things for you.

Answer 2

I've just encountered this issue, and have fixed it with a simple modification to the Bootstrap CSS.

My usual field code is:

<div class="control-group">
    <%= f.label :fieldname, t('models.model.fieldname'), :class => "control-label" %>
    <div class="controls">
        <%= f.text_field :fieldname, :class => 'input-large' %>
    </div>
</div>

Since I'm using f.label and f.text_field the label and input are both encapsulated with divs with the field_with_errors class (as Nicholas mentions), making the resulting HTML:

<div class="control-group">
    <div class="field_with_errors"><label class="control-label" for="model_fieldname">Field name</label></div>
    <div class="controls">
        <div class="field_with_errors"><input class="input-large" id="model_fieldname" name="model[fieldname]" size="30" type="text" value=""></div>
    </div>
</div>

To make these have the same look appearance as Bootstrap's <div class="control-group error"> style I add some extra selectors into bootstrap.css. I find all references to .control-group.error ... and add duplicate lines with .control-group .field_with_errors .... So I end up with this kind of thing:

.control-group.error > label,
.control-group.error .help-block,
.control-group.error .help-inline,
.control-group .field_with_errors > label,
.control-group .field_with_errors .help-block,
.control-group .field_with_errors .help-inline {
  color: #b94a48;
}

It might not be the most elegant way of doing it for Rails, but to me it seemed a lot easier than more dependant gems or overriding the error processing. Yes, you'll have to make the same changes each time you update Bootstrap, but they're fairly simple changes, and you could probably make a patch file to do it automatically.

Answer 3

Rails automatically generates a div with the class field_with_errors when an error message appears. That div wraps the element with error. In order to customize it, you can add this line to application.rb:

config.action_view.field_error_proc = Proc.new { |html_tag, instance| %Q(<div class="field_with_errors">#{html_tag}</div>).html_safe }

This is the default, so in order to get the same structure as Twitter Bootstrap, you could play with it.

html_tag is a placeholder for the field with errors, e.g. <input name="model[attribute]" size="30" type="text" value="">

You could wrap this within another div, and also add a span saying "Please correct the error".

More info: http://guides.rubyonrails.org/configuring.html - item 3.9