Rails Validations – fieldWithErrors

While working on some assignment in rails the other day, I came across a weird issue related with
rails validations and re rendering of views upon actionrecord validation failure. The issue was composed
of two parts.

1. Re rendering the form on validation check was messing the form layout.
2. Only IE was showing the red bordered radio button fields with errors.

I was able to resolve the layout issue by adding the following code in environment.rb

ActionView::Base.field_error_proc = Proc.new { |html_tag, instance|
"<span class="fieldWithErrors">#{html_tag}</span>" }

This code apparently makes use of span instead of div for adding the fieldWithErrors class.

The issue of only IE showing the red border around the radio button fields that failed validation check was
solved by adding outline property to fieldWithErrors class.

.fieldWithErrors * {
  outline: solid 2px #FF0000;
  border: solid 2px #FF0000;

CSS ‘outline’ property seems to work for radio buttons on all browsers.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s