在.NET MVC 3不显眼的jQuery验证 - 显示出成功勾选 [英] jQuery unobtrusive validation in .NET MVC 3 - showing success checkmark

问题描述

使用.NET MVC项目中不显眼的jQuery验证和这似乎是工作的罚款。现在我想显示一个绿色选中当现场验证正确（客户端和/或远程）。

Using jQuery unobtrusive validation within a .NET MVC project and that seems to be working fine. I'm now trying to show a green checkmark when the field validates correctly (client-side and/or remote).

下面是一个示例字段声明：

Here's a sample field declaration:

    <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这反过来有一个背景图像的勾选。

What I'd like to do is add a class 'active' to the "span.isaok" which in turn has a checkmark for a background image.

我尝试使用高亮区/ unhighlight：

I tried using highlight/unhighlight:

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

}）;

但显示了各个领域绿色的对勾即使它们是空的！ （因此显然是错误的）

but that shows a green checkmark for all fields even if they're empty! (hence obviously wrong)

然后我用'成功'选项尝试，但似乎永远不会被解雇。

I then tried using the 'success' option but that never seems to be fired.

我是什么失踪？

编辑：于是我找到<一href=\"http://weblogs.asp.net/imranbaloch/archive/2011/07/13/overriding-unobtrusive-client-side-validation-settings-in-asp-net-mvc-3.aspx\">this博客文章并能挖掘到成功的函数，即。

So I found this blog post and was able to tap into the success function i.e.

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

但现在，如果表单无效，将会同时显示错误信息和有效的标记...

but now if the form isn't valid it shows both the error message and the valid mark...

当我点击页面上的任何位置后就会消失。

and the latter disappears as soon as I click anywhere on the page.

推荐答案

这似乎与jquery.validate.unobtrusive与后来的 $添加的设置干扰的问题。validator.setDefault 。诀窍是加载不显眼的脚本之后的自定义设置的。这里请参见和投票来解决它<一个href=\"http://aspnet.uservoice.com/forums/41201-asp-net-mvc/suggestions/3583148-update-jquery-validate-unobtrusive-implementation-\"相对=nofollow>这里。

This appears to be an issue with the jquery.validate.unobtrusive interfering with the settings added later in $.validator.setDefault. The trick is to load the unobtrusive script after the custom settings. See here and vote to fix it here.

这篇关于在.NET MVC 3不显眼的jQuery验证 - 显示出成功勾选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！