Using the default rails field_error_proc may lead to some layout headaches–your form looks perfect until, uh-oh, someone entered an invalid email address and Rails adds a fieldWithError-styled div that wraps around the problem field.

While this works in many cases, some pixel-perfect layouts may not be able to tolerate the 2-pixel padding around the text_field caused by the red border. An alternative is to change the background color of the offending field.

Include the following code in environment.rb (or use a “require” like I do):

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  error_style = "background-color: #ffff80"
  if html_tag =~ /<(input|textarea|select)[^>] style=/
    style_attribute = html_tag =~ /style=['"]/
    html_tag.insert(style_attribute   7, “#{error_style} “)
  elsif html_tag =~ /<(input|textarea|select)/
    first_whitespace = html_tag =~ /\s/
    html_tag[first_whitespace] = " style='#{error_style}' "
  end
  html_tag
end

Update: Removed some “cruft left over from refactoring”

Update #2: Here is a CSS-friendly version (Thanks to Technoweenie for the suggestion):

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  error_class = "field_with_error"
  if html_tag =~ /<(input|textarea|select)[^>] class=/i
    class_attribute = html_tag =~ /class=['"]/i
    html_tag.insert(class_attribute   7, “#{error_class} “)
  elsif html_tag =~ /<(input|textarea|select)/i
    first_whitespace = html_tag =~ /\s/
    html_tag[first_whitespace] = %{ class="#{error_class}" }
  end
  html_tag
end