MVC3 不显眼的验证将验证移至自定义元素

Question

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

谢谢。

Answer 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);
        }
    }
});

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

Answer 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);
        }
    });
})();

Answer 3

我发现这两个答案都非常有帮助，只是想为使用 1.9.0 版验证插件的任何人添加您需要覆盖忽略隐藏字段的默认行为，如另一篇文章中详细介绍的： jQuery Validate - 启用隐藏字段验证