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/

回答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.

回答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.

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

回答4:

As simple as use this class and this css.

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

来源：https://stackoverflow.com/questions/14666852/jquery-form-validation-css-of-error-label

标签

jquery

css

jquery-validate