6

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/

2

4 Answers 4

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.

0
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.

1
  • @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.
    – Boaz
    Commented Feb 2, 2013 at 22:34
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; }
0

As simple as use this class and this css.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.