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

Question

我正在尝试制作 Validation plugin工作。它适用于个别字段，但当我尝试包含包含所有错误的错误容器的演示代码时，我遇到了问题。问题是当我在所有字段中时它会显示包含所有错误的容器，但我只想在用户按下提交按钮时显示错误容器(但在失去焦点时仍会在控件旁边显示内联错误)。

问题是容器中的消息。当我取消容器下面的答案中提到的代码时，容器输出仅以纯文本形式显示错误数。

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

包含所有输入的代码:

    $().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);
                    }

            });
    });

Answer 1

首先你的容器应该使用一个 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)，并为每个错误使用
• (此元素在“包装器”行中指定)

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