JQuery 验证 - 如何将标题属性设置为错误消息

Question

在 JQuery 验证中，错误的默认行为是创建一个标签，如下所示：

<label for="FirstName" generated="true" class="error">This field is required.</label>

是否可以更改它以便它将输出此标签（将标题属性设置为错误消息）？

<label for="FirstName" generated="true" class="error" title="This field is required.">This field is required.</label>

我尝试过突出显示方法，但标签尚未创建：

$("#form").validate({
    highlight: function (element, errorClass) {
        var label = $("label[for=" + element.id + "]");  // but label doesn't exist yet so this doesnt work
        if (label && label.length > 0) {  // label.length is always 0
            label.attr('title', label.text());
        }
    }
});

Answer 1

好吧，试试这个...

$("#form").validate({
    highlight: function (element, errorClass) {
        setTimeout(function() {
            var label = $("label[for=" + element.id + "]");
            if (label && label.length > 0) { 
                label.attr('title', label.text());
            }
        }, 10);     
    }
});

基本上我们只是将设置标题属性的部分延迟 10 毫秒，这样我们就可以确保首先创建标签元素。

希望这有帮助

Answer 2

试试这个。

var validator = $('#form1').validate({
        highlight: function (element, errorClass, message) {
            var errorMessage = validator.errorMap[element.name]
            $(element).attr('title', errorMessage);
        }
    });

无需黑客攻击

Answer 3

我有点晚了，但偶然发现了这个问题，另一个解决方案是使用 errorPlacement 回调。

editid：同时删除生成的属性，否则在重新应用消息时编辑字段后消息文本会刷新。

var validator = $('#form1').validate({
  errorPlacement: function(error, element) {
    element.attr('title', error.text());
    error.text('!');
    error.removeAttr('generated');
    error.appendTo(element.parent());
    return true;
  }
}