将 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
    })

});

---