jQuery validation error position

Question

In jQuery error indication from jQuery.validate show near the input field and if this message shows our layout crashed.

I need solution based on flow "div" with z-index and error message show over the page and near the input field.

Thanks

Answer 1

Example:

$(document).ready(function(){
        $("#page1Form").validate({
            rules: {
                "field1": {
                    required: true,
                    digits: true
                },
                "field2": {
                    required: true
                }
            },
            errorElement: "div" // This is to override the label w/ a div
        });                     
    });

CSS:

div.error {
 /* Your CSS Code Here */

}

You will need to style the div.

Please post back you div styling as I'm looking to do this as well but my CSS skillz are still lacking =P

Answer 2

Look at the errorClass, errorElement, wrapper, and errorLabelContainer options to see how to modify how the error message is rendered. Most likely, you just need to supply an error class that has the proper CSS to increase the z-index of the error message. If that doesn't work, the validation plugin has an errorPlacement callback that you can use to place the error message where and how you want.