如何仅在提交时显示 jQuery 验证错误容器

我正在努力使验证插件 http://docs.jquery.com/Plugins/Validation工作。它适用于各个字段，但当我尝试包含包含所有错误的错误容器的演示代码时，我遇到了问题。问题是，当我在所有字段中时，它显示包含所有错误的容器，但我想仅当用户按下提交按钮时才显示错误容器（但在失去焦点时仍然在控件旁边显示内联错误）。

问题在于容器中的消息。当我按照下面的容器答案中提到的那样删除代码时，容器输出仅以纯文本形式显示错误数。

获取详细错误消息列表的技巧是什么？我想要的是当用户按下选项卡按钮时在错误的控件旁边显示“错误”，并在按下提交时在最后得到所有内容的摘要。那可能吗？

所有输入的代码均来自此处：

    $().ready(function() {
        var container = $('div.containererreurtotal');

        // validate signup form on keyup and submit
        $("#frmEnregistrer").bind("invalid-form.validate", function(e, validator) {
          var err = validator.numberOfInvalids();
          if (err) {
            container.html("THERE ARE "+ err + " ERRORS IN THE FORM")
            container.show();
          } else {
            container.hide();
          }
        }).validate({
                    rules: {
                            nickname_in: {
                                    required: true,
                                    minLength: 4
                            },
                            prenom_in: {
                                    required: true,
                                    minLength: 4
                            },
                            nom_in: {
                                    required: true,
                                    minLength: 4
                            },
                            password_in: {
                                    required: true,
                                    minLength: 4
                            },
                            courriel_in: {
                                    required: true,
                                    email: true
                            },
                            userdigit: {
                                    required: true
                            }
                    },
                    messages: {
                            nickname_in: "ERROR",
                            prenom_in: "ERROR",
                            nom_in: "ERROR",
                            password_in: "ERROR",
                            courriel_in: "ERROR",
                            userdigit: "ERROR"
                    }

                    ,errorPlacement: function(error, element){
                            container.append(error.clone());
                            error.insertAfter(element);
                    }

            });
    });

首先你的容器应该使用ID而不是类..（我假设ID是'containererreurtotal'）

然后试试这个..

    $().ready(function() {

        $('div#containererreurtotal').hide();

        // validate signup form on keyup and submit
        $("#frmEnregistrer").validate({
            errorLabelContainer: "#containererreurtotal",
            wrapper: "p",
            errorClass: "error",
            rules: {
                nickname_in: { required: true, minLength: 4 },
                prenom_in: { required: true, minLength: 4 },
                nom_in: { required: true, minLength: 4 },
                password_in: { required: true, minLength: 4 },
                courriel_in: { required: true,  email: true },
                userdigit: { required: true }
            },
            messages: { 
                nickname_in: { required: "Nickname required!", minLength: "Nickname too short!" },
                prenom_in: { required: "Prenom required!", minLength: "Prenom too short!" },
                nom_in: { required: "Nom required!", minLength: "Nom too short!" },
                password_in: { required: "Password required!", minLength: "Password too short!" },
                courriel_in: { required: "Courriel required!", email: "Courriel must be an Email" },
                userdigit: { required: "UserDigit required!" }
            },
            invalidHandler: function(form, validator) {
                $("#containererreurtotal").show();
            },
            unhighlight: function(element, errorClass) {
                if (this.numberOfInvalids() == 0) {
                    $("#containererreurtotal").hide();
                }
                $(element).removeClass(errorClass);
            }    

        });
    });

我在这里假设您需要一个

标签来包围每个单独的错误。通常，我使用

容器作为实际容器（而不是您使用的名为“containererreurtotal”的 div），并使用
• 来表示每个错误（此元素在“wrapper”行中指定）

如果将 #containererreurtotal 指定为 display: none;在你的CSS中，那么你不需要ready函数中的第一行（ $('div#containererreurtotal').hide(); ）