如何在 jquery Validate 错误消息中包含字段标签答案

【问题标题】：How do I include the field label in a jquery Validate error message如何在 jquery Validate 错误消息中包含字段标签
【发布时间】：2015-03-26 05:45:51
【问题描述】：

我在页面顶部显示我的 jquery 验证错误。我想在每条消息旁边包含与每个无效字段关联的标签的文本值。这是怎么做的。这是我的 jquery。

$(document).ready(function(){
    $("#reqAccount").validate({
            errorClass: "error-text",
            validClass: "valid",
            errorLabelContainer: "#errorList",
            wrapper: "li ",
            highlight: function(element, errorClass, validClass) {
                $(element).addClass("error-input").addClass(errorClass).removeClass(validClass);
             },
             unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass("error-input").removeClass(errorClass).addClass(validClass);
             }
        });
    });

【问题讨论】：

标签： jquery jquery-validate

【解决方案1】：

这是我最终更新消息以包含标签文本值的方式。文本字段的 id 是在 errorMap 中找到的，所以我用它们找到了具有相似 ID 的标签，并将它们附加到 errorList 中。如果有更好的方法，请发表评论。

  $(document).ready(function(){
    $("#reqAccount").validate({
        errorClass: "error-text",
        validClass: "valid",
        errorLabelContainer: "#errorList",
        wrapper: "li class='indent error-text'",
        showErrors: function(errorMap, errorList) {
            var i = 0;
            var labelText = new Array(this.numberOfInvalids());
            $.each(errorMap, function(name, value) {
                labelText[i] = $("#" + name + "Label").text();
                i++;
            });
            i = 0;
            $.each(errorList, function(name, value) {
                this.message = labelText[i] + " " + this.message;
                i++;
        });
            this.defaultShowErrors();

         },

        highlight: function(element, errorClass, validClass) {
            $(element).addClass("error-input").addClass(errorClass).removeClass(validClass);
         },
         unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass("error-input").removeClass(errorClass).addClass(validClass);
         }
    });
});

【讨论】：

行：this.message = labelText[i] + " " + this.message;可以包含在第一个 $.each() 本身中。似乎不需要第二个 $.each()。还是您应该包含 errorList 中的某些内容？
@Ritesh - 第一个 $.each 旨在遍历 errorMap 并创建一个字段 id 值数组。使用 errorMap 中的 id 检索与每个字段相关的标签文本。第二个 $.each 遍历 errorList，这是显示错误的对象。我将在第一个 $.each 中检索到的文本添加到 errorList 值中。

【解决方案2】：

如果我理解正确，我想你可以使用showErrors：

$(".selector").validate({
   showErrors: function(errorMap, errorList) {
      //use the fn params to get a map of current errors,
      //then append to your <li> elements
   }
});

参考。 http://docs.jquery.com/Plugins/Validation/validate 在“选项”选项卡下。

【讨论】：

这是有道理的，但 showErrors 的文档很少。我如何知道 errorMap 包含哪些属性，甚至知道如何附加到它？

【解决方案3】：

Coder 感谢您发布的答案，您发布的 showErrors 代码对我帮助很大。但是，在 onfocusout 设置为 true 的情况下，我无法让它为我工作。我不得不稍微修改你的代码，希望这能帮助其他正在处理同样问题的人。

showErrors: function(errorMap, errorList) {
                var i = 0;
                var labelText = new Array(this.numberOfInvalids());

                $.each(errorMap, function(name, value) {
                    //I had to change the following line to get the for attribute of the 
                    //label that matches the id of the name
                    var label = $("label[for='" + $('#' + name).attr('id') + "']").text();
                    labelText[i] = label;
                    i++;
                 });
                i = 0;
                $.each(errorList, function(name, value) {
                    //This is where I ran into issues.  With the code you had earlier, the labelText kept
                    //getting appended every time I would change focus from an input.  To get rid of that
                    //I had to run a couple of checks
                    var semi = labelText[i].indexOf(':');
                    var requiredString = 'This field is required';
                    var check = labelText[i].indexOf(requiredString); 

                    if (check != -1) {
                        if (semi != -1 && labelText[i].indexOf(':', semi + 1) != -1) {
                            var indexOfSemi = labelText[i].indexOf(':'); 
                            labelText[i] = labelText[i].substr(0, indexOfSemi); console.log(labelText[i]);
                            this.message = hold + ": " + this.message;
                        }
                    } else {
                        this.message = labelText[i] + " " + this.message;d
                        i++;
                    }
                });
                this.defaultShowErrors();
            },

只是想说声谢谢，希望这也能帮助其他人。

【讨论】：

【解决方案4】：

$.validator.messages.required = function (param, input) {
     return 'The ' + $("label[for='"+ input.name +"'].lblRequired").text()
     + ' field is required';
}

我使用它，它非常适合我。当您使用 jQuery 选择相应的标签时，请务必为您的标签添加一个额外的标识符（在我的例子中，我添加了类“.lblRequired”）。当验证器触发时，它会创建具有相同“for”的新标签，将它们与输入相关联。因此，如果您不添加类或其他方式来识别您的原始标签，那么当您为后续验证选择错误的标签时，您最终会遇到一团糟，并且标签将继续与错误消息复合。

【讨论】：