jquery - Html.ValidationMessageFor 带有图像和工具提示

Question

几天以来，我已经开始努力反对它，尝试了所有的想法(无论是否愚蠢)，但似乎我无法让它发挥作用。

我想要存档的是:我只想显示一个带有 jquery 工具提示的图标，而不是原始的验证消息。此外，该解决方案应该易于维护......意味着可以在需要验证的每个 View 上使用。

到目前为止我尝试过的:

@Html.ValidationMessageFor(Function(m) m.Password, Nothing, New With {.class = "ValWarn"})

CSS:

.ValWarn {content: url(images/Warning.png);margin: 0.1em;}

结果:image 1

问题:我无法将验证消息分配给其标题。

测试#20357

    <div id="divhiddenval" style="display: none;">
        @Html.ValidationMessageFor(Function(m) m.Password)
    </div>
    @Html.PasswordFor(Function(m) m.Password)
    <div id="valdiv_@Html.IdFor(Function(m) m.Password)" style="display: inline;"></div>

Javascript:

$(document).ready(function () {
        fullValidation();
        $('form').submit(function () {
            if (! $(this).valid()) {
                fullValidation();
                return false;
            }
        });
            $('input').keydown( function () {
                singleValidation(this.id);
                tooltip();
            });

        });


        function singleValidation(_id) {
            var _err = $("span[data-valmsg-for='" + _id + "']");

            if ($(_err).text() != "") {
                $("#valdiv_" + $(_err).attr("data-valmsg-for")).html("<span class='ValWarn tooltip' title='<span class=&quot;warncolor&quot;>" + $(_err).text() + "</span>'></span>");

            } else {
                $("#valdiv_" + $(_err).attr("data-valmsg-for")).html("");
            }
        }

        function fullValidation() {
            $("#divhiddenval span[data-valmsg-for]").each(function () {
                singleValidation($(this).attr("data-valmsg-for"));
            })
            tooltip();
        }

结果:shows tooltip on hover

问题:每次都调用 tooltip() 有点矫枉过正。此外，它在第一次按键时不起作用。当我移出输入并再次移入输入时，它会起作用。因此按键不会触发，直到它失去焦点一次。

下一步尝试:我在互联网上的某个地方找到了 ValidationHTMLMessageFor 扩展。非常接近，但到目前为止...我的应用程序是全局化的，因此我将被迫在每个资源字符串之前添加图像，因为对于数据注释，它只需要静态字符串。此外，工具提示问题也不会因此得到解决。

所以，根本......我想不出任何其他方法可以像我想要的那样工作。另一方面，我不敢相信微软让我们自己设计验证消息变得如此困难:(

有人可以帮我解决这个问题吗？

Answer 1

好的，这里的部分问题是 ValidateMessageFor 返回一个包含您在模型中声明的错误消息的 span 元素。相反，我会尝试使用 ValidateFor。 ValidateFor 不会返回附加到模型的错误消息，但会发出信号，表明其所绑定(bind)的字段验证失败，这使其成为您想要向用户呈现的通知的绝佳候选者。

确保您在 web.config 中启用了客户端验证和不显眼的 javascript，并且 View 中包含正确的 javascript 文件。

网络配置

<appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

JavaScript

~/Scripts/jquery-1.7.1.min.js
~/Scripts/jquery.validate.min.­js
~/Scripts/jquery.validate.unob­trusive.min.js

这里有一个关于您尝试实现但使用 ValidateFor 的类似用法的不错的引用。

我忘记补充一点，我解释的方法会不引人注目地进行验证，而不必“提交”表单。您仍然可以通过使用 ValidateFor 提交表单来标记您的验证有错误，然后使用 jQuery 访问 input-validation-error 类的数据和 data-val- 属性来获取错误消息，从而以相同的方式获得所需的结果。工具提示。