Question

我正在关注this tutorial以在jqueryui工具提示中显示验证错误。验证工作正常，但我无法显示正确的错误消息，因为正确的属性无法有条件地链接到工具提示，如下例所示：

$(document).tooltip({
        items: ".input-validation-error",
        content: function () {

            //debugger;
            return $(this).attr('data-val-required');
        }
    });

此逻辑只显示所需的字段错误消息，有没有办法通过点击验证结果来扩展此逻辑（对于远程和比较类型验证），还是我遇到了死胡同？

Answer 1

由于content（）函数是按需调用的，因此您可以根据所讨论元素this的属性提供所需的任何文本。

您需要检查元素并返回发生的验证错误的文本。类似的东西：

$(document).tooltip({
    items: ".input-validation-error",
    content: function () {

        //debugger;
        return $(this).attr('data-val-required') || 
               $(this).attr('data-val-date') ||
               $(this).attr('data-val-number'); // etc etc
    }
});

这将返回填充了错误消息的数据验证属性。

Answer 2

使用原始问题中引用的tutorial，更改第4行：

@{ Html.ValidateFor(m => m.UserName); }

为：

@Html.ValidationMessageFor(m => m.Username, null, new {style="visibility:hidden"})

然后，按如下方式修改内容功能：

$(document).tooltip({
    items: ".input-validation-error",
    content: function () {
        return $("[data-valmsg-for='" + $(this).attr('id') + "']").text();
    }
});

基本上，我们不希望显示原始ValidationMessageFor范围（visibility = hidden）。我们只是将它用作工具提示的容器。

如何在jqueryui工具提示中显示jqueryui验证错误消息

2 个答案: