DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Use Background Color To Show Error Fields Instead Of Wrapping Them In A Div

04.13.2006
| 9754 views |
  • submit to reddit
        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

See my blog.inquirylabs.com for more Rails stuff.    

Comments

Snippets Manager replied on Thu, 2008/12/11 - 11:21pm

.fieldWithErrors { margin: 0; display: inline; label { color: #8a1f11; } input, textarea, select { background-color: #fbe3e4 !important; color: #8a1f11; } }

Snippets Manager replied on Thu, 2008/12/11 - 11:21pm

You don't need to change ActionView::Base.field_error_proc. You can change the background color of the input entirely with CSS: .fieldWithErrors { margin: 0; display: inline; label { color: #8a1f11; } input, textarea, select { background-color: #fbe3e4 !important; color: #8a1f11; } }

Snippets Manager replied on Mon, 2012/05/07 - 2:23pm

Good idea ;)

Snippets Manager replied on Mon, 2012/05/07 - 2:23pm

Oh man, use css classes!