提问人：Anders 提问时间：10/18/2011 最后编辑：Anders 更新时间：8/10/2014 访问量：1493
MVC3 非侵入式验证将验证移动到自定义元素
MVC3 unobtrusive validation move validation to custom element
问：
服务器端我渲染了一个隐藏字段，然后我使用一个名为 flexbox 的 jquery 小部件创建一个组合框，它会创建一个输入元素客户端，并在您在框中选择某些内容后将选定的 ID（非文本）复制到隐藏字段。
问题是，当验证出现问题时，验证代码会将类名添加到隐藏字段，我希望将其添加到输入元素中，是否可以以某种方式监听添加类名，或者将某个钩子钩入事件并将类名移动到输入字段。
这有效，但它丑陋如地狱，想要一个更好的解决方案
var oldClass = $hdn.attr('class');
setInterval(function () {
if (oldClass != $hdn.attr('class')) {
$input.removeClass(oldClass);
oldClass = $hdn.attr('class');
$input.addClass($hdn.attr('class'));
}
}, 200);
谢谢。
答：
3赞
counsellorben
10/18/2011
#1
在我有一个正在验证的隐藏元素的地方，我添加了一个自定义属性。然后，在 中，我通过在两个函数的末尾添加以下内容来修改 and 函数：data-val-visibleidjquery.validate.jshighlightunhighlight
if ($(element).is(":hidden")) {
var targetId = $(element).attr("data-val-visibleid");
$("#" + targetId).addClass(errorClass).removeClass(validClass);
}
有些人不喜欢干预jquery.validate.js，但这通常是实现此类自定义的最简单方法。
更新
我做了一些研究，发现jquery.validate有一个漂亮的方法，您可以在其中覆盖默认函数，例如highlight（）和unhighlight。加载其他脚本后，将以下内容添加到页面中：setDefault
$.validator.setDefaults( {
highlight: function (element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
if ($(element).is(":hidden")) {
var targetId = $(element).attr("data-val-visibleid");
$("#" + targetId).addClass(errorClass).removeClass(validClass);
}
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
if ($(element).is(":hidden")) {
var targetId = $(element).attr("data-val-visibleid");
$("#" + targetId).addClass(errorClass).removeClass(validClass);
}
}
});
这将覆盖默认函数，而不更改基础脚本。
评论
0赞
Anders
10/18/2011
在我的上一个项目中，我们无法更新 jquery 或 jquery UI，因为有人对这些文件进行了太多更改，所以我支持那些不喜欢在 API 文件中更改的文件。我希望有一个更清洁的解决方案
0赞
counsellorben
10/18/2011
Anders，我对核心jquery.validate文件的修改从来都不太满意，所以我进一步检查了一下，发现它有一个功能，所以你可以有一个包含自定义覆盖的外部脚本。setDefault
0赞
Anders
10/19/2011
奇怪的是，当我从脚本 this.searchForm.valid（） 触发验证时，我的自定义突出显示方法不会 trgger，如果我提交它就可以工作，这很奇怪吗？
0赞
counsellorben
10/19/2011
Anders，调用不会在 jquery.validate 中调用。要调用（调用），您需要调用该函数，如下所示： .valid()showErrorsshowErrorshighlightformthis.searchForm.valid().form()
1赞
Anders
10/19/2011
#2
多亏了 Counsellorben，我找到了一个很好的解决方案，不过我的方式略有不同。 首先，我覆盖了我的主对象构造器中的默认方法，该构造器是在 document.ready 上构造的。然而，document.ready 为时已晚，当从 form.valid（） 执行触发验证时，您的方法不会触发，但是在执行提交时会触发（非常奇怪），此代码适用于提交和从脚本触发
(function() {
var highlight = $.validator.defaults.highlight;
var unhighlight = $.validator.defaults.unhighlight;
$.validator.setDefaults({
highlight: function (element, errorClass, validClass) {
if ($(element).attr("data-val-visualId") != null) {
element = $("#" + $(element).attr("data-val-visualId"))[0];
}
highlight(element, errorClass, validClass);
},
unhighlight: function (element, errorClass, validClass) {
if ($(element).attr("data-val-visualId") != null) {
element = $("#" + $(element).attr("data-val-visualId"))[0];
}
unhighlight(element, errorClass, validClass);
}
});
})();
1赞
LoJo
8/10/2014
#3
我发现这两个答案都非常有帮助，只是想为使用 1.9.0 版验证插件的任何人添加，您需要覆盖忽略隐藏字段的默认行为，详见另一篇文章： jQuery Validate - 启用隐藏字段的验证
评论