# Changing default behavior of fieldWithErrors

**URL:** <https://www.ruby-forum.com/t/changing-default-behavior-of-fieldwitherrors/54149>\
**Category:** Rails\
**Created:** [February 24, 2006, 9:36am UTC](https://www.ruby-forum.com/t/changing-default-behavior-of-fieldwitherrors/54149 "2006-02-24T09:36:02Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![g0nzo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3bc359/32.png) [@g0nzo](https://www.ruby-forum.com/u/g0nzo)\
**Post date:** [February 24, 2006, 9:36am UTC](https://www.ruby-forum.com/t/changing-default-behavior-of-fieldwitherrors/54149/1 "2006-02-24T09:36:02Z")

</div>

Hi!

The topic can be a bit misleading, because it may suggest that i want to  
change css style.

What i’d like to change is that normally, when there’s an error, rails  
creates a div element with the fieldWithErrors class as the parent of  
the input. I’d like to change this behavior, so the input element itself  
will have this class added to its current classes and removed if  
there’re no more errors.

How it can be (easily) done?

---

<div class="post-metadata">

**Author:** ![g0nzo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3bc359/32.png) [@g0nzo](https://www.ruby-forum.com/u/g0nzo)\
**Post date:** [February 24, 2006, 10:08am UTC](https://www.ruby-forum.com/t/changing-default-behavior-of-fieldwitherrors/54149/2 "2006-02-24T10:08:03Z")

</div>

On 2/24/06, g0nzo [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> How it can be (easily) done?
> 
> –  
> Posted via [http://www.ruby-forum.com/](http://www.ruby-forum.com/).
> 
> * * *
> 
> Rails mailing list  
> removed\_email\_address@domain.invalid  
> [http://lists.rubyonrails.org/mailman/listinfo/rails](http://lists.rubyonrails.org/mailman/listinfo/rails)

The easiest way would to use CSS to select the form elements inside  
the fieldWithErrors div. So in your CSS file you’d do something like  
.fieldWithErrors input, .fieldWithErrors textarea {  
background-color: red;  
}  
and all your form elements with errors will now have a red  
background. The only hiccup would be that your errored elements would  
still be inside a div, so you’d have to nullify that by setting the  
display to inline, or however it is you want them to behave like.

## I looked over the Rails code and there’d be no easy way to modify it to do what you want. As it is now, it just takes the HTML for the input and sends it through “\<div class="fieldWithErrors"\>#{html\_tag}”. To change it to do what you want, you’d have to change the architecture of the error system so that it can get to the object generating the particular HTML for your input and have it add the “class=myErrorClass” to the options. It’d be a pain, to say the least.

-Matt T.

---

<div class="post-metadata">

**Author:** ![g0nzo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3bc359/32.png) [@g0nzo](https://www.ruby-forum.com/u/g0nzo)\
**Post date:** [February 24, 2006, 11:22am UTC](https://www.ruby-forum.com/t/changing-default-behavior-of-fieldwitherrors/54149/3 "2006-02-24T11:22:13Z")

</div>

Thanks!

I’ve totally forgot about the css method you mentioned.

Getting rid of the div element would be a bit cleaner, but the css  
method does exactly what i wanted - change border of the input element  
instead of adding background color to the parent div element. Thanks  
again.

---

<div class="post-metadata">

**Author:** ![g0nzo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3bc359/32.png) [@g0nzo](https://www.ruby-forum.com/u/g0nzo)\
**Post date:** [February 24, 2006, 2:29pm UTC](https://www.ruby-forum.com/t/changing-default-behavior-of-fieldwitherrors/54149/4 "2006-02-24T14:29:15Z")

</div>

Thanks!

It looks a bit scary, as i know nothing about regular expressions, but  
i’ll look for a tutorial (and maybe finally understand them) and try to  
modify this code.

---

<div class="post-metadata">

**Author:** ![g0nzo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3bc359/32.png) [@g0nzo](https://www.ruby-forum.com/u/g0nzo)\
**Post date:** [February 24, 2006, 1:46pm UTC](https://www.ruby-forum.com/t/changing-default-behavior-of-fieldwitherrors/54149/5 "2006-02-24T13:46:44Z")

</div>

I’d like to say I came up with this, but I actually found it somewhere  
else.

I have the following inside my environment.rb file:

ActionView::Base.field\_error\_proc = Proc.new do |html\_tag, instance|  
msg = instance.error\_message  
error\_style = “background-color: #f2afaf”  
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

Although at the moment this just sets the style to a background colour,  
you could change it to set the class the be whatever you wanted.

Regards,  
Paul

---

<div class="post-metadata">

**Author:** ![g0nzo](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/3bc359/32.png) [@g0nzo](https://www.ruby-forum.com/u/g0nzo)\
**Post date:** [December 13, 2006, 8:16pm UTC](https://www.ruby-forum.com/t/changing-default-behavior-of-fieldwitherrors/54149/6 "2006-12-13T20:16:24Z")

</div>

I tried this script, and i get a strange result:  
in HTML i get ----style=“background-color: rgb(242, 175, 175);”----  
instead of ----style=“background-color: #f2afaf”----.

Does anyone know who and why transforms #f2afaf into rgb(242, 175, 175)

???

Paul I. wrote:

> I’d like to say I came up with this, but I actually found it somewhere  
> else.
> 
> I have the following inside my environment.rb file:
> 
> ActionView::Base.field\_error\_proc = Proc.new do |html\_tag, instance|  
> msg = instance.error\_message  
> error\_style = “background-color: #f2afaf”  
> 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
> 
> Although at the moment this just sets the style to a background colour,  
> you could change it to set the class the be whatever you wanted.
> 
> Regards,  
> Paul