asp.net-mvc-3 - NET MVC 3中的jQuery非侵入式验证-显示成功复选标记

在.NET MVC项目中使用jQuery非侵入式验证，这似乎运行良好。我现在尝试在字段正确验证(客户端和/或远程)时显示绿色的选中标记。

这是一个示例字段声明:

    <div class="clearfix">
        @Html.LabelFor(model => model.Address1, "Street")
        <div class="input">
            @Html.TextBoxFor(model => model.Address1, new { @class = "xlarge", @maxlength = "100", @placeholder = "e.g. 123 Main St" })
            <span class="help-message">
                @Html.ValidationMessageFor(model => model.Address1)
                <span class="isaok">Looks great.</span>
            </span>
            <span class="help-block">Enter the street.</span>
        </div>
    </div>

我想做的是在“span.isaok”中添加一个“active”类，该类又为背景图像打了一个勾号。

我尝试使用突出显示/取消突出显示:

$.validator.setDefaults({
onkeyup: false,

highlight: function (element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
    $(element.form).find("label[for=" + element.id + "]").addClass("error");
    $(element).parent().find("span.isaok").removeClass("active");
},
unhighlight: function (element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element.form).find("label[for=" + element.id + "]").removeClass("error");
    if ($(element).val().length > 0) {
        $(element).parent().find("span.isaok").addClass("active");
    }
}

});

但是，即使所有字段为空，它也会在所有字段上显示一个绿色的选中标记! (因此显然是错误的)

然后，我尝试使用“成功”选项，但似乎从未被解雇。

我想念什么？

编辑:因此，我找到了this blog post并能够利用成功函数，即

$(function () {
    var settings = $.data($('form')[0], 'validator').settings;
    settings.onkeyup = false;
    settings.onfocusout = function (element) { $(element).valid(); };

    var oldErrorFunction = settings.errorPlacement;
    var oldSuccessFunction = settings.success;
    settings.errorPlacement = function (error, inputElement) {
        inputElement.parent().find("span.isaok").removeClass("active");
        oldErrorFunction(error, inputElement);
    };
    settings.success = function (label) {
        var elementId = '#' + label.attr("for");
        $(elementId).parent().find("span.isaok").addClass("active");
        oldSuccessFunction(label);
    };
});

但是现在，如果表单无效，它将同时显示错误消息和有效标记...

当我在页面上的任意位置单击时，后者就会消失。

最佳答案

这似乎是jquery.validate.unobtrusive干扰稍后在$.validator.setDefault中添加的设置的问题。诀窍是在自定义设置之后加载不引人注目的脚本。查看here并投票对其进行修复here。

关于asp.net-mvc-3 - NET MVC 3中的jQuery非侵入式验证-显示成功复选标记，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7493512/