Provide clean html/css handling of form fields with errors. Rails wraps error input fields with a div, to provide styling. We just add the css class directly to the error form field.
The default rails way can break html structure, and destroy placement/styling. We saw this happen mainly when you wrap form fields inside label tags.
Normal Rails html/css for error input fields
<div class="fieldWithErrors"><input>Test</input></div>
New output
<input class="input-error">Test</input>
This works on input, textarea and select elements.
-
Install the plugin:
script/plugin install git://github.com/xing/classy_field_errors.git -
Put the css contained in sample/field_error_proc.css in your base css file
Longer explanation and context for this plugin here: Making Errors Look Good
Mark Schuette, Sebastian Roebke, Ladislav Martincik, Hendrik Mans and Tim Payton
Please find out more about our work in our tech blog.
The MIT License
Copyright © 2009 XING AG
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.