将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读者的利益发布的答案.

根据文档中的示例代码,它真的很简单,

$(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已经阅读了文档中的示例代码,他就会看到他刚刚击败了他想要实现的目标. $([])甚至不是一个有效的jQuery选择器.

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

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

根据文档,submitHandler回调函数会在验证后自动提交表单.不需要在submit()这里打电话.

4) 根据文档,这是默认值,无需声明它...

validClass: "valid"

5)包装这样的一切都是多余的,不必要的,冗长的,神秘的......

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

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

})(jQuery, window, document);

除了给寻求指导的人带来更多混淆之外,它没有用处. 它来自Sam Deering的一个流行的,但解释不佳的在线演示/教程,它与许多地方相连.IMO,如果你要以jQuery/JavaScript专家的身份离开,至少要使用JavaScript中常见的代码格式,而不是PHP(Allman)使用的代码格式.无论选择何种代码格式样式,至少要始终如一地使用它.

与任何其他jQuery插件完全一样,只需将.validate()方法包装在DOM ready事件处理程序中就足以正确初始化此插件.

$(document).ready(function() {

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

});