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

发布于 2024-10-05 05:31:11 字数 649 浏览 10 评论 0原文

我正在使用 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-

原文

I'm using jQuery.validate (with ASP.NET MVC 1.0 and xVal) and trying to override the default error display code so that instead of appending the error span to the element, it appends an error image icon with the error message itself in the image's title/alt attributes.

I'm calling this from the head of my page:

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

It appears to work fine - right icons in the right place - but then each time validate() is called, it's adding ANOTHER validation icon to the field, so you very quickly end up with dozens of error icons next to each input...

I'm clearly missing some attribute that'll inform the validate plugin that there's already an error for that field, but I can't work out what - I've tried adding an htmlfor=element.Id attribute, I've tried adding the field-validation-error class, but I'm not getting anywhere and now I'm stuck

Thanks,

-D-

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陌若浮生 2024-10-12 05:31:11

您必须检查它是否存在：

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

You must check whether it exists:

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

回复收藏 0 原文

夜灵血窟げ 2024-10-12 05:31:11

问题是 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 方法来做到这一点，但老实说，这只是通过查看代码来实现的。我仍在试图弄清楚这一切到底是如何处理的。

The problem is that jQuery.validate uses the error element to tell whether or not the error has already been placed. Your code does not append the element, so for each call it appends your image again.

To see this, do the following:

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

Now you will only see the image added once. However, errorPlacement does not get called again if error is present, so your errorTag will not change. Likewise, when the success label is added, the image will not go away automatically.

There may be a way to do this using jQuery.validate methods, but honestly this is just from looking through the code. I am still trying to figure out exactly how all of it is handled.

回复收藏 0 原文