CODEWITHSUNDEEP
jquerycssjquery-validate
Student
Student

Reputation: 531

jQuery form validation - CSS of error label

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/

Upvotes: 6

Views: 56717

Answers (4)

Kamlesh Kumar
Kamlesh Kumar

Reputation: 1680

As simple as use this class and this css.

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

Upvotes: 0

Sparky
Sparky

Reputation: 98748

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.

Upvotes: 14

Boaz
Boaz

Reputation: 20230

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.

Upvotes: 6

Relevart
Relevart

Reputation: 747

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; }

Upvotes: 1

Related Questions