.NET MVC 3 中的 jQuery 不显眼验证 - 显示成功复选标记

Question

在 .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>

我想要做的是将一个类“active”添加到“span.isaok”，该类又具有背景图像的复选标记。

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

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

});

但这会显示所有字段的绿色复选标记，即使它们是空的！ （因此显然是错误的）

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

我缺少什么？

编辑：所以我发现这篇博文 并能够利用成功函数 ie，

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

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

一旦我单击页面上的任意位置，后者就会消失。

Answer 1

这似乎是 jquery.validate.unobtrusive 干扰 $.validator.setDefault 中稍后添加的设置的问题。诀窍是在自定义设置之后加载不显眼的脚本。请参阅此处并投票修复该问题这里。

Answer 2

万一有人遇到类似的问题，我最终通过使用 jquery.validate.unobtrusive.js 的未缩小版本并将我的 js 添加到 onError 和 onSuccess 方法来解决此问题。现有代码保留原样。在部署期间使用重新缩小的版本。

谢谢。

Answer 3

这不是对你的问题的直接回答。我将提供另一种方法：TwitterBootstrapMVC。

使用这个库，您必须为每个输入编写的内容是：

@Html.Bootstrap().ControlGroup().TextBoxFor(m => m.Address1)

就是这样。您将拥有标签、输入和验证消息 - 一切都已完成，无需 JavaScript。它会为您生成正确的 html 标记。您只需要确保您有适当的标准 CSS 类，例如 .field-validation-error、.field-validation-valid...