加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程开发 > asp.Net > 正文

asp.net-mvc-3 – .NET MVC 3中的jQuery不显眼验证 – 显示成功

发布时间:2020-12-16 04:24:17 所属栏目:asp.Net 来源:网络整理
导读:在.NET MVC项目中使用jQuery不引人注目的验证,似乎工作正常.我正在尝试在字段正确验证(客户端和/或远程)时显示绿色复选标记. 这是一个示例字段声明: div class="clearfix" @Html.LabelFor(model = model.Address1,"Street") div class="input" @Html.TextBo
在.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”中添加一个“有效”类,后者又有一个背景图像的复选标记.

我尝试使用高亮/不亮:

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

});

但即使它们是空的,它也显示所有字段的绿色复选标记! (因此显然是错误的)

然后我尝试使用’success’选项,但似乎永远不会被解雇.

我错过了什么?

编辑:所以我找到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.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读