如何停止显示多条错误消息的自定义 jQuery.validate.errorPlacement 函数？答案

【问题标题】：How do I stop a custom jQuery.validate.errorPlacement function showing multiple error messages?如何停止显示多条错误消息的自定义 jQuery.validate.errorPlacement 函数？
【发布时间】：2010-11-30 19:01:28
【问题描述】：

我正在使用 jQuery.validate（使用 ASP.NET MVC 1.0 和 xVal）并尝试覆盖默认的错误显示代码，这样它不会将错误范围附加到元素，而是附加一个带有错误的错误图像图标消息本身在图像的标题/替代属性中。

我从我的页面顶部调用这个：

jQuery.validator.setDefaults({
  errorPlacement: function(error, element) {
    var errorTag = '<img src="error.png" title="' + error.html() + '" />';
    var errorImg = $(errorTag);
    errorImg.insertAfter(element);
  }
});

它似乎工作正常 - 正确的图标在正确的位置 - 但是每次调用 validate() 时，它都会向该字段添加另一个验证图标，因此您很快就会在每个输入旁边看到几十个错误图标...

我显然缺少一些属性，该属性会通知验证插件该字段已经存在错误，但我无法弄清楚是什么 - 我尝试添加 htmlfor=element.Id 属性，我'我尝试添加 field-validation-error 类，但我没有得到任何地方，现在我被卡住了

谢谢，

-D-

【问题讨论】：

标签： jquery validation jquery-validate xval

【解决方案1】：

你必须检查它是否存在：

jQuery.validator.setDefaults({
  errorPlacement: function(error, element) {
    var errorTag = '<img src="error.png" id="myTag" title="' + error.html() + '" />';
    var errorImg = $(errorTag);

    if ($('#myTag').length == 0) {
      errorImg.insertAfter(element);
    }
  }
});

【讨论】：

【解决方案2】：

问题在于 jQuery.validate 使用错误元素来判断错误是否已经被放置。您的代码不会附加元素，因此每次调用都会再次附加您的图像。

要查看此内容，请执行以下操作：

jQuery.validator.setDefaults({
  errorPlacement: function(error, element) {
    error.insertAfter(element);  // Add the error element

    var errorTag = '<img src="error.png" title="' + error.html() + '" />';
    var errorImg = $(errorTag);
    errorImg.insertAfter(element);
  }
});

现在您只会看到添加一次的图像。但是，如果出现错误，则不会再次调用 errorPlacement，因此您的 errorTag 不会更改。同样，添加成功标签后，图片也不会自动消失。

可能有一种方法可以使用 jQuery.validate 方法来做到这一点，但老实说，这只是通过查看代码。我仍在试图弄清楚这一切是如何处理的。

【讨论】：

【解决方案3】：

我已经发布了一篇博客文章here，它解释了如何使用 jQuery 验证从头到尾为客户端和服务器端验证执行此操作。希望对您有所帮助！

【讨论】：