jquery使用数据消息属性验证自定义错误元素答案

【问题标题】：jquery validate custom error element with data message attributejquery使用数据消息属性验证自定义错误元素
【发布时间】：2015-10-09 12:50:11
【问题描述】：

我正在使用 jquery validate，我想要这种格式的错误元素：

<div class="error-holder" data-error-message="Please correct this field"></div>

我已经尝试过使用 errorPlacement 和 errorElement 选项：

errorPlacement: function (error, element) {
        error = error.attr("class", "error-holder").attr("data-error-message", error.text()).text("");
        error.insertAfter(element);
    },
    errorElement: "div"

这会产生正确的错误元素，但是当尝试提交表单（有其他错误）时，错误元素每次都会重复。

如何在没有重复项的情况下获得正确的错误元素？

【问题讨论】：

为什么需要将错误消息放在属性中？这是一个动态创建的元素。请解释为什么您不能使用标准方法来设置自定义错误消息。

标签： jquery jquery-validate

【解决方案1】：

我通过首先检查错误 div 是否已经存在解决了这个问题：

errorPlacement: function (error, element) {
        error = error.attr("class", "error-holder").attr("data-error-message", error.text()).text("");
        if ($("div[for=" + element.attr("id") + "]").length == 0) {
            error.insertAfter(element);
        }
    }

由于 css 中的设计要求，我需要这个特定的错误 div。

感谢回复！

【讨论】：

这是我为 mdbootstrap 调整不显眼的验证所需的缺失链接，谢谢。 :)

【解决方案2】：

重复可能是由于提前将此错误容器放入您的 HTML 标记中，然后尝试定位它...

error = error.attr("class", "error-holder").attr("data-error-message", ....

插件会自动创建除您的错误元素之外的错误元素，并且不知道（找不到）要切换的错误元素。

您可以将错误容器设置为div...

errorElement: "div"

并且可以将错误类设置为error-holder...

errorClass: "error-holder"

但是，此插件没有用于为错误消息容器设置自定义属性的选项。当插件动态创建和自动切换错误消息时，为什么需要将错误消息放在属性中，目前还不清楚。

如果您需要自定义错误消息，有多种标准方法可以实现这一点，无需提前创建静态消息元素。

演示：http://jsfiddle.net/okwwrsd9/

$(document).ready(function () {

    $('#myform').validate({
        errorElement: "div",
        errorClass: "error-holder",
        rules: {
            foo: {
                required: true
            }
        },
        messages: {
            foo: {
                required: "Please correct this field"
            }
        }
    });

});

【讨论】：