将jQuery验证错误消息传递到单个框(div) [英] Pass jQuery validate error messages to a single box (div)

问题描述

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

I've search a lot but still haven't figured it out... How do I pass various error messages to a single box (div) instead of highlighting them nearby the relative fields. Let's say, I've got 4 required fields and have custom messages for them:

<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.但是现在错误消息在相关字段中得到内置"(我不需要).有什么办法可以实现?

#error-note is a div right before all fields where I need to get all/any of the error message output (printed). But now error messages get "built-in" in relative fields (which I don't need). Is there any way to achieve it?

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

推荐答案

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

Answer posted for the benefit of the SO reader.

根据文档中的示例代码，实际上就是这么简单，

As per example code in the documentation it's really this simple,

$(document).ready(function () {

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

});

<div id="error-note"></div>也必须放在HTML布局中.

<div id="error-note"></div> must also be placed within the HTML layout.

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

Working DEMO: http://jsfiddle.net/6kxSp/

注释:

1)OP只是将他的容器混在一起. errorContainer:是第二个可选容器. errorLabelContainer对于包含错误列表的单个框就足够了.

1) The OP simply mixed up his containers. errorContainer: is a second optional container. errorLabelContainer is good enough for a single box containing the error listing.

2)这没有任何意义:errorLabelContainer: $([]).如果OP读取了文档中的示例代码，他会发现他只是打败了自己试图实现. $([])甚至不是有效的jQuery选择器.

2) This makes no sense: errorLabelContainer: $([]). If the OP had read the sample code in the docs, he would have seen that he just defeated what he was trying to achieve. $([]) isn't even a valid jQuery selector.

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

3) This is unnecessary and redundant.

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

根据文档，submitHandler回调函数在验证后自动提交表单.无需在此处致电submit().

As per docs, the submitHandler callback function automatically submits the form after validation. No need to call submit() here.

4)根据文档，这是默认设置，无需声明...

4) As per docs, this is the default, no need to declare it...

validClass: "valid"

---

5)像这样包装所有东西都是多余的，不必要的，冗长的和不可思议的...

---

5) Wrapping up everything like this is superfluous, unnecessary, verbose, and arcane...

(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)一起使用.无论选择哪种代码格式样式，都至少要始终使用它.

It serves no useful purpose other than to cause more confusion to those seeking guidance. It comes from a popular, yet poorly explained, online demo/tutorial by Sam Deering that is linked to/from many places. IMO, if you're going to pass yourself off as a jQuery/JavaScript expert, at least use the code formatting style more commonly seen in JavaScript, and not the one used with PHP (Allman). Whatever code formatting style is chosen, at least use it consistently.

与其他jQuery插件一样，只需将.validate()方法包装在DOM ready事件处理程序中就足以对该插件进行正确的初始化.

Exactly like any other jQuery plugin, simply wrapping the .validate() method within the DOM ready event handler is more than adequate for proper initialization of this plugin.

$(document).ready(function() {

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

});

这篇关于将jQuery验证错误消息传递到单个框(div)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！