Forum: Ruby on Rails Changing default behavior of fieldWithErrors

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
Szymon N. (Guest)
on 2006-02-24 10:36
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?
Matt T. (Guest)
on 2006-02-24 11:08
(Received via mailing list)
On 2/24/06, g0nzo <removed_email_address@domain.invalid> wrote:
>
> How it can be (easily) done?
>
> --
> Posted via http://www.ruby-forum.com/.
> _______________________________________________
> Rails mailing list
> removed_email_address@domain.invalid
> 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}</div>". 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.
Szymon N. (Guest)
on 2006-02-24 12:22
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.
Paul I. (Guest)
on 2006-02-24 14:46
(Received via mailing list)
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
Szymon N. (Guest)
on 2006-02-24 15:29
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.
Mike (Guest)
on 2006-12-13 21:16
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
This topic is locked and can not be replied to.