使用 jQuery 验证在单独的 div 中显示错误消息

我正在使用 jQuery 验证，我想在 div 中显示错误消息<div class="alert alert-error" id="errorContainer">默认显示在表单下方的功能不适用于我的表单设计。

验证脚本链接到我有表单的页面，它看起来像：

    $(function validate() {

    var rules = {
                rules: {
                    full_name: {
                        minlength: 2,
                        maxlength: 50,
                        required: true
                    },
                    address: {
                        minlength: 5,
                        required: true
                    },
                    city: {
                        minlength: 2,
                        required: true
                    },
                    state: {
                        minlength: 2,
                        maxlength: 2,
                        required: true
                    },
                    zip: {
                        minlength:5, 
                        maxlength:5,
                        required: true
                    },
                    phone: {
                        required: true,
                        phoneUS: true
                    },
                    phone_other: {
                        required: true,
                        phoneUS: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    date_to_start: {
                        required: true
                    },
                    ssn: {
                        required: true,
                        ssn: true,
                    },
                    salary: {
                        required: true
                    }

                }
            };

        var validationObj = $.extend (rules, Application.validationRules);

        $('#employment-application').validate(validationObj);

});

现在我确实尝试改变$('#employment-application').validate(validationObj);添加到下面的代码以及尝试将其添加到我有表单的页面底部，都给出了负面结果。脚本似乎添加了style="display:none;" to the errorContainer并且不会在任何地方加载任何错误。

（尝试改变$('#employment-application').validate(validationObj);到下面）

$("#employment-application").validate({
        errorContainer: "#errorContainer", 
        errorLabelContainer: "#errorContainer", 
        errorElement: "li"
    })

回顾一下，我想使用 jQuery 表单验证并在单独的 div 中显示收到的错误消息，因为默认设置不适用于我的表单设计。

您可以使用errorPlacement传递回调的选项如下：http://jsfiddle.net/cMhQ7/ http://jsfiddle.net/cMhQ7/

我用过一个标准divid 是输入元素的名称，与_validate后缀，但您可以根据需要更改。

HTML

<form id="employment-application" method="post">
    <input name="full_name" type="text" />
    <div id="full_name_validate"></div>
    <input type="submit" />
</form>

JavaScript

$(function validate() {

    var rules = {
        rules: {
            full_name: {
                minlength: 2,
                maxlength: 50,
                required: true
            },
        },
        errorPlacement: function (error, element) {
            var name = $(element).attr("name");
            error.appendTo($("#" + name + "_validate"));
        },
    };

    $('#employment-application').validate(rules);

});