jquery - JQuery 验证错误放置成功与失败

Question

我正在对表单使用 jQuery Validation，我必须在输入字段旁边显示一个复选标记（如果输入正确），并在输入字段下方显示错误消息（例如：“请输入至少 4 个字符”） .

我正在考虑做这样的事情：

errorPlacement: function(error, element) {
* 如果验证成功 * error.appendTo($("#checkmark")); * 否则 * error.appendTo($("#error-message")); }

但是如何根据需要显示的消息类型来定位不同的 div 目标呢？还是我完全错了，还有另一种方法可以做到这一点？

谢谢！

score 0 · Accepted Answer

您可以在 jquery.validate.js 文件中搜索此表达式：

 this.settings.success( label )

并将其替换为：

 this.settings.success( label, element)

正如他们在文档中所说的那样，这个技巧修复了 jquery-validate。

score 0 · Accepted Answer

在过去，我通过使用validClass有效选项来完成此操作：

$(".selector").validate({
   validClass: "success"
})

success可以只是一个带有复选标记背景的css类：

.success {
  background: url(checkmark.png) right no-repeat; /* Say, 16x16px */
  margin-right: 18px;
}

score 0 · Accepted Answer

晚了5个月......希望它仍然有帮助：

jQuery.validate 使用errorPlacement:传递错误和元素参数的选项，因此您可以对它们做任何您想做的事情......并且每次用户表单中发生错误时都会执行该函数。它的对应物是success:将标签作为选项传递。

但是为了获得最大的灵活性，您甚至不必使用“标签”。相反，您可以将 jQuery 对象从 errorPlacement （基于从对象“元素”遍历）传递给success:选项。成功也是实时计算的。

有点令人困惑，但这里有一些通用代码......

对于您的 HTML，您可以输入：

<div class="errorparent">
<input type="text" id="username" name="username"/>
<div class="norederrorx errordetails">&nbsp;</div>
</div>

在 jQuery.validate 选项下定位自定义 div：

errorPlacement: function(error, element) {
   var errorcontent=eval(error);
   errorspotholder = element.parents('.errorparent');

在您的成功选项中：

errorspotholder.find('.rederrorx').removeClass('rederrorx').addClass('norederrorx');

如果你想操作更多的 div ......例如一个单独的有效标记 div，你只需从 'errorsotholder' 遍历到不同的对象，它指的是包含父 div 'errorparent'

一切顺利！

埃米尔

3 回答 3