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/
Quote OP: "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?"
You can simply change the default element from label
to div
by using the errorElement
option. Since div
is "block-level", it will automatically wrap to another line.
$(document).ready(function() {
$('#myform').validate({ // initialize the plugin
errorElement: 'div',
// your other rules and options
});
});
Working Demo: http://jsfiddle.net/xvAPY/
You don't even have to mess with the CSS. But if you need to change anything, target them with div.error
.
div.error {
/* your rules */
}
See the documentation for more Validate plugin options.
The label
element is an inline element
and not a block-level
element. In other words, by default the label
element will not start a new line.
In order to do that, you can override its default styling like so:
label.error {
display:block;
width:100%;
...
}
See JsFiddle demo based on your own.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With