Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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/

like image 750
Student Avatar asked Feb 02 '13 21:02

Student


2 Answers

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.

like image 50
Sparky Avatar answered Oct 11 '22 12:10

Sparky


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.

like image 37
Boaz Avatar answered Oct 11 '22 12:10

Boaz