I am using the exact same example used on the jquery website for a simple form validation; http://docs.jquery.com/Plugins/Validation
There is one thing I don't understand though, the error message in the example is displayed to the right of each input field. I want to display the errors under each input field. How does that work? I tried playing around with the width and padding but no luck so far.
The CSS code I am using is slightly altered, but still very simple;
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: 0px; vertical-align: bottom; }
p { clear: both; }
fieldset {position: absolute; left: 450px; width: 400px; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
Here is the jfiddle http://jsfiddle.net/nBv7v/