几天以来,我已经开始努力反对它,尝试了所有的想法(无论是否愚蠢),但似乎我无法让它发挥作用。
我想要存档的是: 我只想显示一个带有 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="warncolor">" + $(_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();
}
问题:每次都调用 tooltip() 有点矫枉过正。此外,它在第一次按键时不起作用。当我移出输入并再次移入输入时,它会起作用。因此按键不会触发,直到它失去焦点一次。
下一步尝试: 我在互联网上的某个地方找到了 ValidationHTMLMessageFor 扩展。非常接近,但到目前为止... 我的应用程序是全局化的,因此我将被迫在每个资源字符串之前添加图像,因为对于数据注释,它只需要静态字符串。此外,工具提示问题也不会因此得到解决。
所以,根本......我想不出任何其他方法可以像我想要的那样工作。 另一方面,我不敢相信微软让我们自己设计验证消息变得如此困难:(
有人可以帮我解决这个问题吗?
最佳答案
好的,这里的部分问题是 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.unobtrusive.min.js
这里有一个关于您尝试实现但使用 ValidateFor 的类似用法的不错的引用。
我忘记补充一点,我解释的方法会不引人注目地进行验证,而不必“提交”表单。您仍然可以通过使用 ValidateFor 提交表单来标记您的验证有错误,然后使用 jQuery 访问 input-validation-error 类的数据和 data-val- 属性来获取错误消息,从而以相同的方式获得所需的结果。工具提示。
关于jquery - Html.ValidationMessageFor 带有图像和工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29414117/