解决jquery.validate.js的验证bug

时间:2024-12-19 18:34:32

版本提示:jq为1.4.4, jquery.validate 为jQuery validation plug-in 1.7

问题:

a.选填选项,如邮箱设置格式验证,那么情况输入框,验证label变成空白的【原来的默认提示没了】

b.必填选项,如手机号码直接复制进去,格式是对的,验证label是不变的

1.母版页

   $(function () {
$.validator.setDefaults({
errorClass: "tip-error",
errorPlacement: function (error, element) {
error.prependTo(element.parents("td").next());
objError.removeClass("btn_infomust");
objError.html(error);
},
success: function (element) { element.html("正确").addClass("tip-success");
}
});
});

2.表单页代码示例

<tr>
<th scope="row">
手机号码:
</th>
<td>
@Html.TextBoxFor(t => t.PhoneNO, new { @Style = "width:200px", maxlength = "" })
</td>
<td class="slight">
<label class="btn-infomust">必填项。</label>
</td>
</tr>
<tr>
<th scope="row">
邮箱地址:
</th>
<td>
@Html.TextBoxFor(t => t.Email, new { @Style = "width:200px", maxlength = "" })
</td>
<td class="slight">
<span class="btn-info">选填项。</span>
</td>
</tr>

3.jquery.validate.js文件代码

解决:注意代码是写死的,需根据自己的去改

 //360行前后
if(element.value==""){if($(element).rules().required != true&&$(element).rules().required != false){$(element).parents("td").next("td").html('<label class="btn-info">选填项。</label>');}} element: function (element) {
//规则required不存在时,则还原默认提示
if (element.value == "") {
if ($(element).rules().required != true && $(element).rules().required != false) {
$(element).parents("td").next("td").html('<label class="btn-info">选填项。</label>');
}
} return result;
}
//670行前后
showLabel: function (element, message) {
//手工替换label
$(element).parents("td").next("td").html(label); console.log(label);
this.toShow = this.toShow.add(label);
},

版本提示:jq为1.9.1, jquery.validate 为jQuery Validation Plugin 1.9.0,jquery.validate.unobtrusive.js,使用Model验证

问题:

当第一次页面加载时,直接删除必填字段的文本框内容,不会提示错误信息【猜测:未初始化】

代码:

$.extend($.validator, {
defaults: {
onfocusout: function (element, event) {
if (element.value == "") {//此部分为修改的代码
if ($(element).rules().required == true) {
$(element).valid();
}
} if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
this.element(element);
}
},
}
}