error (div class="fieldWithErrors") workaround? - ruby-on-rails

Question

In my project, I have a register form.
My HTML looks like
<form method="post" action="/users">
<div style="margin: 0pt; padding: 0pt;">
<input type="hidden" value="lDHrKRC2ENhRKcaoBR4XGfzri/MY09PjqVDvHRtC0D4=" name="authenticity_token"/>
</div>
<p><label for="login">Login</label>
<input type="text" size="30" name="user[login]" id="user_login"/></p>
<p><label for="email">Email</label>
<input type="text" size="30" name="user[email]" id="user_email"/></p>
<p><label for="password">Password</label>
<input type="password" size="30" name="user[password]" id="user_password"/></p>
<p><label for="password_confirmation">Confirm Password</label>
<input type="password" size="30" name="user[password_confirmation]" id="user_password_confirmation"/></p>
<p><input type="submit" value="Sign up" name="commit"/></p>
</form>
Now generating an error by submitting an the empty form my code looks like:
<form method="post" action="/users">
<div style="margin: 0pt; padding: 0pt;"><input type="hidden" value="lDHrKRC2ENhRKcaoBR4XGfzri/MY09PjqVDvHRtC0D4=" name="authenticity_token"/>
</div>
<p><label for="login">Login</label>
</p><div class="fieldWithErrors"><input type="text" value="hg" size="30" name="user[login]" id="user_login"/></div>
<p><label for="email">Email</label>
</p><div class="fieldWithErrors"><input type="text" value="gh" size="30" name="user[email]" id="user_email"/></div>
<p><label for="password">Password</label>
</p><div class="fieldWithErrors"><input type="password" value="gh" size="30" name="user[password]" id="user_password"/></div>
<p><label for="password_confirmation">Confirm Password</label>
<input type="password" value="gh" size="30" name="user[password_confirmation]" id="user_password_confirmation"/></p>
<p><input type="submit" value="Sign up" name="commit"/></p>
</form>
this will destroy my layout.
Is there a solution doing
<input type="text" value="gh" size="30" name="user[email]" class="fieldWithErrors" id="user_email"/>
instead of
<div class="fieldWithErrors"><input type="text" value="gh" size="30" name="user[email]" id="user_email"/></div>
?

Answer 1

Create a new initializer, for example, /config/initializers/field_error.rb:
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance_tag|
if html_tag =~ /<(input|textarea|select)[^>]+class=/
class_attribute = html_tag =~ /class=['"]/
html_tag.insert(class_attribute + 7, "fieldWithErrors ")
elsif html_tag =~ /<(input|textarea|select)/
first_whitespace = html_tag =~ /\s/
html_tag[first_whitespace] = " class='fieldWithErrors' "
end
html_tag
end
Ryan Bates covered this in Railscast episode 39

Answer 2

This is an error in how Rails shows form errors. This is an old and known issue with Rails: https://rails.lighthouseapp.com/projects/8994/tickets/1626-fieldwitherrors-shouldnt-use-a-div
Why it still hasn't been solved is a mystery to me. I guess it's one of those many little things that you need to override manually in Rails. Definitely try John Topley's workaround, though. Or fix it in your local Rails code and submit that as patch to Rails.

Answer 3

Maybe you should consider using formtastic http://github.com/justinfrench/formtastic.

Answer 4

The Railscast is the way to go but you need to update it for Rails 3.x.
add this to the end of your environment.rb
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance_tag|
"<span class='field_error'>#{html_tag}</span>".html_safe
end
Bounce the rails application and you'll be set.