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 Manager

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

| 8532 views |

        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.

Tags:

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; } }