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

Question

我正在尝试使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);
                    }

            });
    });

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);
            }    

        });
    });

我在这里假设你想要围绕每个错误的<p>标签.通常我使用<ul>容器作为实际容器(而不是您使用的div称为'containererreurtotal')和<li>表示每个错误(此元素在"包装器"行中指定)

如果指定#containererreurtotal为display:none; 在你的CSS中,你不需要就绪函数中的第一行($('div#containererreurtotal').hide();)

Answer 2

您可以在http://docs.jquery.com/Plugins/Validation/validate#toptions中找到meta选项的文档.

如果要在单独的错误容器中显示输入AND旁边的错误,则需要覆盖errorPlacement回调.

从你的例子:

...
                    courriel_in: "ERROR",
                    userdigit: "ERROR"
            }
            ,errorContainer: container

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

            // We don't need this options
            //,errorLabelContainer: $("ol", container)
            //,wrapper: 'li'
            //,meta: "validate"
    });
 ...

该error参数是包含<label>标记的jQuery对象.该element参数是验证失败的输入.

更新评论

使用上面的代码,错误容器不会清除错误,因为它包含克隆的副本.如果jQuery给出一个"隐藏"事件,它很容易解决,但它不存在.让我们添加一个隐藏事件!

1. 首先我们需要AOP插件

2. 我们为hide方法添加了一个建议:

               jQuery.aop.before({target: jQuery.fn, method: "hide"},
                   function(){
                       this.trigger("hide");
                   });
   

3. 我们绑定hide事件以隐藏克隆的错误:

           ...
           ,errorPlacement: function(error, element){
               var errorClone = error.clone();
               container.append(errorClone);
               error.insertAfter(element).bind("hide", function(){
                   errorClone.hide();
               });
           }
           ...
   

试试看

Answer 3

我会删除 errorContainer ，然后在回发时拦截验证，并在其中手动添加一个容器错误，如下所示：

$("#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({ ... })