1

我进行了很多搜索，但仍然没有弄清楚...如何将各种错误消息传递给单个框（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/

4

1 回答 1

10

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

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

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

根据 docs，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 就绪事件处理程序中就足以正确初始化此插件。

$(document).ready(function() {

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

});
于 2013-04-11T15:55:02.900 回答