error (div class="fieldWithErrors") workaround?

Question

Hello! 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.