error (div class="fieldWithErrors") workaround?

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>

?

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

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.

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

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.