jquery - 将 jQuery 验证错误消息传递到单个框 (div)

Question

我已经搜索了很多，但仍然没有弄清楚...如何将各种错误消息传递到单个框(div)，而不是在相关字段附近突出显示它们。假设我有 4 个必填字段并为其提供了自定义消息:

<script>
// validation
(function($,W,D)
{
    var JQUERY4U = {};
    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
            //form validation rules
            $("#register-form").validate({
                validClass: "valid",
                errorContainer: $("#error-note"),
                errorLabelContainer: $([]),
                rules: {
                    name: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    birthdate: "required",
                    eua: "required"
                },
                messages: {
                    name: "Name is required",
                    email: "Please, enter your email",
                    birthdate: "We need to know your date of birth",
                    eua: "Please check the checkbox..."
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        }
    }
    //when the dom has loaded setup form validation rules
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });
})(jQuery, window, document);
</script>

#error-note 是一个位于所有字段之前的 div，我需要在其中获取所有/任何错误消息输出(打印)。但现在错误消息在相关字段中“内置”(我不需要)。有什么办法可以实现吗？

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Answer 1

为了 SO 读者的利益而发布答案。

As per example code in the documentation就这么简单，

$(document).ready(function () {

    $('#myform').validate({ 
        // rules and other options,
        errorLabelContainer: "#error-note",
        wrapper: "li"
    });

});

<div id="error-note"></div>还必须放置在 HTML 布局中。

工作演示:http://jsfiddle.net/6kxSp/

<小时/>

注释:

1) OP 只是混淆了他的容器。 errorContainer:是第二个可选容器。 errorLabelContainer对于包含错误列表的单个框来说已经足够了。

<小时/>

2) 这没有任何意义:errorLabelContainer: $([]) 。如果OP读过sample code in the docs ，他会发现他刚刚击败了他想要实现的目标。 $([])甚至不是一个有效的 jQuery 选择器。

<小时/>

3)这是不必要和多余的。

submitHandler: function(form) {
   form.submit();
}

As per docs ，submitHandler回调函数在验证后自动提交表单。无需调用submit()在这里。

<小时/>

4) As per docs ，这是默认的，不需要声明...

validClass: "valid"

<小时/>

5)像这样总结一切是多余的、不必要的、冗长的和神秘的......

(function($,W,D)
{
    var JQUERY4U = {};
    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
            $("#register-form").validate({ .... });
        }
    }

    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });

})(jQuery, window, document);

除了给那些寻求指导的人带来更多困惑之外，它没有任何有用的目的。 它来自一个流行但解释不清的 online demo/tutorial by Sam Deering链接到/来自许多地方。 IMO，如果您想冒充 jQuery/JavaScript 专家，至少使用 JavaScript 中更常见的代码格式化样式，而不是 PHP (Allman) 中使用的样式。无论选择什么代码格式样式，至少要一致地使用它。

与任何其他 jQuery 插件完全相同，只需包装 .validate() DOM 就绪事件处理程序中的方法足以正确初始化此插件。

$(document).ready(function() {

    $("#register-form").validate({
        // any rules, options and callbacks
    })

});

<小时/>