* Tumblr readers should click through for code samples since the embedded snippets don’t render in the dashboard view.

Just a quick little tip this week. Most of my current projects are making use of Formtastic for generating forms. This tip is slightly Formtastic-specific, but could easily be adapted to any form markup.

One project in particular is extremely form-heavy, with a multiple step application (wizard-ish) process with many fields per step. The custom Formtastic CSS is pretty complex and styling elements with an error state came up as a task that needed some improvement this week.

Formtastic takes Ruby code that looks like

and generates markup like

Arguably a bit verbose, but we’re armed with several hooks for doing custom styling. When a form is submitted and doesn’t validate on the server, it will re-render this form and the line item for the invalid fields will include an “error” class.

And now with a couple of CSS tweaks, we can dynamically add a custom error marker next to each invalid element’s label.

Now create a custom PNG marker - perhaps something like this:

And add a dash of jQuery to drop them in:

A sample of the end result: