show jquery validation error below the element

Question

I have two elements(dropdowns) which are very closely placed. These elements are required fields.

I am using jquery valiate to validate the fields. The error message are showing for both the elements and the space between the elements increases as the error message of first control is displayed near the element

$('#RegisterForm').validate({
        rules: {
            Country:{required: true},
            State:{required: true}
        },
        messages: {
            Country:{required: "Select Country"},
            State:{required: "Select State"}
        }
    });

I have tried using break before the elements as:

$('#RegisterForm').validate({
            rules: {
                Country:{required: true},
                State:{required: true}
            },
            messages: {
                Country:{required: "<br/>Select Country"},
                State:{required: "<br/>Select State"}
            }
        });

When i did so, the second element moves to next line.

How can i show the error messages just below the elements without affecting the alignment/placement of nearby elements.

Answer 1

Use the errorPlacement option (see documentation here: http://docs.jquery.com/Plugins/Validation/validate#toptions)

$('#RegisterForm').validate({
        rules: {
            Country:{required: true},
            State:{required: true}
        },
        messages: {
            Country:{required: "Select Country"},
            State:{required: "Select State"}
        },
        errorPlacement: function(error, element) {
            error.appendTo( element.parent("td").next("td") );
        }
    });

Of course you'll have to adapt the code to your situation.