jQuery form validation - CSS of error label

Question

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/

Answer 1

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 .

Answer 2

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.

Answer 3

You have to set display: block on label.error , this way, it will display in the next line. Now the only thing you have to do is add more padding to label.error , or use a table or something to align the error under the text box.

In the jsFiddle you posted, the following modification would put the error message under the text boxes:

label.error { display: block; float: none; color: red; padding-left: 11.5em; vertical-align: top; }

Answer 4

As simple as use this class and this css.

.has-error input{
  background: rgba(166, 66, 66, 0.69);
}