在.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); }; });
一旦我点击页面上的任何地方,后者就会消失.