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/

Can you please post a jsfiddle or similar so we can see the behavior? — Vlad Magdalin
– Vlad Magdalin, Commented Feb 2, 2013 at 21:47

Sparky · Accepted Answer · 2013-02-02 22:27:55Z

14

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.

edited Feb 2, 2013 at 22:27

answered Feb 2, 2013 at 22:00

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boaz · Accepted Answer · 2013-02-02 22:00:48Z

6

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.

edited Feb 2, 2013 at 22:00

answered Feb 2, 2013 at 21:55

Boaz

20.3k9 gold badges68 silver badges74 bronze badges

1 Comment

Boaz Over a year ago

@Student No problem. I actually prefer Sparky's solution better, since it employs a documented plugin option instead of messing with the plugin's CSS.

Relevart · Accepted Answer · 2013-02-02 22:00:18Z

1

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

answered Feb 2, 2013 at 22:00

Relevart

7471 gold badge8 silver badges20 bronze badges

Comments

Kamlesh Kumar · Accepted Answer · 2016-12-10 13:22:12Z

0

As simple as use this class and this css.

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

answered Dec 10, 2016 at 13:22

Kamlesh Kumar

1,6802 gold badges21 silver badges31 bronze badges

Collectives™ on Stack Overflow

jQuery form validation - CSS of error label

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related