提问人:seekay 提问时间:9/21/2011 最后编辑:seekay 更新时间:4/3/2013 访问量:4757
.NET MVC 3 中的 jQuery 非侵入式验证 - 显示成功复选标记
jQuery unobtrusive validation in .NET MVC 3 - showing success checkmark
问:
在.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");
}
}
});
但是,即使所有字段为空,也会显示一个绿色复选标记!(因此显然是错误的)
然后我尝试使用“成功”选项,但似乎从未被解雇。
我错过了什么?
编辑:因此,我找到了这篇博文,并能够利用成功功能,即
$(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.js 的未缩小版本并将我的 js 添加到 onError 和 onSuccess 方法中来解决这个问题。现有代码保留原样。在部署期间使用重新缩小的版本。
谢谢。
评论
这似乎是jquery.validate.unobtrusive干扰后面添加的设置的问题。诀窍是在自定义设置后加载不显眼的脚本。请看这里,并投票决定在这里修复它。$.validator.setDefault
这不是对您的问题的直接回答。我将提供另一种方法:TwitterBootstrapMVC。
有了这个库,你只需要为每个输入编写:
@Html.Bootstrap().ControlGroup().TextBoxFor(m => m.Address1)
就是这样。您将拥有标签、输入和验证消息 - 所有这些都会得到处理,而无需 javascript。它为您生成适当的 html 标记。你只需要确保你有适当的标准css,比如,.......field-validation-error
.field-validation-valid
评论