error (div class="fieldWithErrors") workaround?

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