Making errors look good

There are many html forms on XING – when you sign up, when you write a message, or when you discuss in a group. We do most of our form validations on the server side. This allows us to apply complex validations, prevents code duplication, and apply security checks.

This works well – you define the requirements for the specific field (such as <input>) and Rails returns the page with an error message, also highlighting the corresponding field in red. Sounds good, but that’s actually where the problem is. Rails surrounds the field with a <div> that is styled via CSS.

This additional <div> may lead to CSS problems especially in pixel-precise layouts such as the XING html forms, it may break the HTML structure – and it will add completely unneeded DOM complexity.

Changing how Rails handles fields with errors

The technical details of how we solved it follow. We were not the first ones to encounter this problem, inquirylabs also talked about (and solved) it in their blog post Highlight background of fields with errors. The basic idea is rather simple: We rewrote the method Rails uses to handle form field errors to create cleaner html. The best solution we can think of is to add a class directly to the error elements, and that class has styling to border the error fields in red. No added DOM elements, no more broken structure, just clean code.

Here is the default rails html output

<div class="fieldWithErrors">
<input />Test</div>

Here is what our changes output

<input class="input-error" />Test

Luckily, Rails already provides a simple entry point for cleaning things up. In active_record_helper.rb in the actionpack gem, there is a class variable defined @@field_error_proc, which can be redefined to apply custom error handling on the html input fields. We’ve uploaded the code to github: http://github.com/xing/classy_field_errors.

It’s a plugin, so just:

• script/plugin install git://github.com/xing/classy_field_errors.git
• Put the css contained in field_error_proc.css in your base css file

The method we call inside the block, does exactly what we want. You pass it an element and a css class. It then applies that css class to input, textarea, or select elements, either adding the class to the existing classes or adding a class attribute to the element.

The method itself just calls the HtmlElement class method add_css_class which does what you’d think it does: It instantiates an HtmlElement object, adds the class passed into the elements and returns the changed html_element (which is really a string).

So, with the added class, we can do the same error highlighting, but without any added DOM complexity and with the intended semantic separation of HTML for content and CSS for styling.

Our solution produces the same basic results as inquirylabs, but also took care of 2 edge cases:

• it only adds the CSS class if the element doesn’t have it already, so in the rare case that an input field has two errors, the code remains clean
• the code also works with self-closing <input/> tags

Thanks to Ladislav Martincik, Sebastian Roebke, Mark Schuette and Hendrik Mans who all contributed to making this code highly efficient and clean.