在元素下面显示jquery验证错误

Question

我有两个非常紧密的元素(下拉列表).这些元素是必填字段.

我正在使用jquery valiate来验证字段.错误消息显示两个元素,并且元素之间的空间增加,因为第一个控件的错误消息显示在元素附近

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

我试过在元素之前使用break作为:

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

当我这样做时,第二个元素移动到下一行.

如何在元素下方显示错误消息,而不会影响附近元素的对齐/放置.

Answer 1

使用errorPlacement选项(请参阅此处的文档: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") );
        }
    });

当然,你必须根据你的情况调整代码.