Geek asks and answers

JQuery form validation - CSS error tags

I use the same example used on the jquery website for simple form validation; http://docs.jquery.com/Plugins/Validation

There is one thing that I don’t understand, but the error message in the example is displayed to the right of each input field. I want to display errors in each input field. How it works? I tried to play with width and indentation, but so far no luck.

The CSS code that I use is slightly modified, 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 jfiddle http://jsfiddle.net/nBv7v/

+5
source share
4 answers

OP: " . . ?"

label div errorElement. div " ", .

$(document).ready(function() {

    $('#myform').validate({ // initialize the plugin
        errorElement: 'div',
        // your other rules and options
    });

});

: http://jsfiddle.net/xvAPY/

CSS. - , div.error.

div.error {
    /* your rules */
}

.

+13

label inline element, block-level. , label .

, :

label.error {
    display:block;
    width:100%;
    ...
}

JsFiddle demo .

+5

display: block label.error, , . label.error - .

jsFiddle, , :

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

, css.

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

More articles:


All Articles