Question

Serverside我渲染一个隐藏字段，然后我使用一个名为flexbox的jquery小部件来创建一个组合框，它创建一个输入元素客户端，并在选中框中的内容后将选定的ID（非文本）复制到隐藏字段。

问题是验证代码在验证错误时会向隐藏字段添加一个类名，我想将它添加到输入元素中，我可以以某种方式监听添加类名时的内容，或者某些内容挂钩到event并将classname移动到inputfield。

这很有效，但它很丑陋，想要一个更好的解决方案

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的Validation插件的人添加，你需要覆盖忽略隐藏字段的默认行为，详见下一篇文章：{{ 3}}

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

3 个答案: