MVC3 不显眼的验证将验证移动到自定义元素答案

【问题标题】：MVC3 unobtrusive validation move validation to custom elementMVC3 不显眼的验证将验证移动到自定义元素
【发布时间】：2011-12-09 20:42:45
【问题描述】：

服务器端我呈现一个隐藏字段，然后我使用一个名为 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);

谢谢。

【问题讨论】：

标签： asp.net-mvc-3 validation unobtrusive-javascript hidden-field

【解决方案1】：

在验证隐藏元素的地方，我添加了一个自定义属性data-val-visibleid。然后，在jquery.validate.js 中，我修改highlight 和unhighlight 函数，在两个函数的末尾添加以下内容：

if ($(element).is(":hidden")) {
    var targetId = $(element).attr("data-val-visibleid");
    $("#" + targetId).addClass(errorClass).removeClass(validClass);
}

有些人不喜欢插手 jquery.validate.js，但它通常是最简单的方法来实现这样的自定义。

更新

我做了一些研究，发现 jquery.validate 有一个漂亮的 setDefault 方法，您可以在其中覆盖默认函数，例如 highlight() 和 unhighlight。加载其他脚本后，将以下内容添加到您的页面：

$.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);
        }
    }
});

这将覆盖默认函数，而不更改底层脚本。

【讨论】：

在我的上一个项目中，我们无法更新 jquery 或 jquery UI，因为有人对这些文件做了太多更改，所以我支持那些不喜欢更改 API 文件的人。我希望有更清洁的解决方案
Anders，我对核心 jquery.validate 文件的修改从来没有太高兴过，所以我进一步检查，发现它有一个setDefault 函数，所以你可以有一个外部脚本包含您的自定义覆盖。
奇怪，当我从脚本 this.searchForm.valid() 触发验证时，我的自定义突出显示方法没有触发，如果我提交它就可以工作，这很奇怪吗？
Anders，调用 valid() 不会调用 jquery.validate 中的 showErrors。要调用showErrors（它调用highlight），您需要调用form 函数，如下所示：this.searchForm.valid().form()。

【解决方案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);
        }
    });
})();

【讨论】：

【解决方案3】：

我发现这两个答案都非常有帮助，只是想为使用 Validation 插件 1.9.0 版的任何人添加您需要覆盖忽略隐藏字段的默认行为，如另一篇文章中所述：@987654321 @

【讨论】：