Not wrapping css div with field_with_errors for fields created with f.text_field but works for f.input

问题

I'm having problems with my views. I'm using zurb foundation for stylesheets and when I enter wrong input in forms I get the error above the form but the fields containing the errors are not wrapped with red. Looking further into this there is no field_with_errors div wrapper for the input fields. After looking further into this I found out if I use f.input instead of f.text_field I get the correct error wrapping.

As zurb has styles for text_field, text_area etc. I'm using those but I don't get the error div from rails. Is there any good solution to this?

Here I get correct Zurb foundation styling but no field_with_errors div:

.field
  = f.label :name
  = f.text_field :name, :class => "input-text"

Here I don't get the Zurb styling but the element is wrapped with field_with_errors div:

.field
  = f.label :name
  = f.input :name, :class => "input-text"

So basicly it seems the f.text_field helper somehow bypasses the Rails view mechanism of providing div classes to show the errors.

回答1:

If you want to pass class to SimpleForm's input you should use

= f.input :name, :input_html => { :class => 'input-text' }

回答2:

f.text_field is the Rails form helper, not simple_form's helper (Since you tagged this with simple-form, I'll assume you are using that). Since simple form only wraps its own attributes with errors, it is ignoring the rails form helper attributes.

What you probably want is

= f.input :name, :as => :string

You also don't need your own label with simple_form either, so we can condense f.label and f.text_field to become:

= f.input :name, :as => :string, :label => "Custom label"

If you leave off the :label attribute, it will default to the name of the symbol, in this case your label will be "Name". With the :label attribute gives you a label titled "Custom Label".

Hope that helps.

来源：https://stackoverflow.com/questions/11188845/not-wrapping-css-div-with-field-with-errors-for-fields-created-with-f-text-field