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

Question

我正在使用jQuery.validate (带有ASP.NET MVC1.0和xVal)，并试图覆盖默认的错误显示代码，以便它不会将错误跨度附加到元素，而是在图像的标题/alt属性中附加带有错误消息本身的错误图像图标。

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

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-

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

Answer 2

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

要查看此信息，请执行以下操作：

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方法来做到这一点，但老实说，这只是通过查看代码来实现的。我仍然在努力弄清楚所有这些都是如何处理的。

Answer 3

我发布了一篇博客文章here，解释了如何使用jQuery验证从头到尾对客户端和服务器端进行验证。希望它能帮上忙！