jquery - 在元素下方显示 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") );
        }
    });

当然，您必须根据您的情况调整代码。