解决jquery.validate.js的验证bug

简介: 版本提示:jq为1.4.4, jquery.validate 为jQuery validation plug-in 1.7 问题: a.选填选项,如邮箱设置格式验证,那么情况输入框,验证label变成空白的【原来的默认提示没了】 b.

版本提示: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 = "30" })
                    </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 = "30" })
                    </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);
                }
            },
        }
}    

 

相关文章
|
JSON 算法 安全
Nest.js JWT 验证授权管理
Nest.js JWT 验证授权管理
335 3
Nest.js JWT 验证授权管理
egg.js 24.18参数验证
egg.js 24.18参数验证
157 0
egg.js 24.18参数验证
|
7月前
|
存储 JavaScript
|
移动开发 JavaScript 前端开发
JavaScript:验证输入
【9月更文挑战第02天】
313 6
|
JavaScript 数据安全/隐私保护
jQuery Password Validation(密码验证)
jQuery Password Validation(密码验证)
120 3
|
JavaScript 前端开发 API
JavaScript 验证 API
JavaScript 验证 API
126 2
|
前端开发 微服务 API
微服务浪潮下的JSF革新:如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起,企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用,通过RESTful服务实现前后端分离,提升灵活性和适应性。
177 1
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
763 1
|
JavaScript 前端开发 数据安全/隐私保护
Vue.js 表单处理技巧大揭秘!v-model 与自定义验证综合运用,打造高效表单处理体验!
【8月更文挑战第31天】Vue.js 是一款备受欢迎的前端框架,其表单处理功能强大且灵活。v-model 指令可实现双向数据绑定,简化表单元素值与 Vue 实例数据的同步过程;结合自定义验证规则,则能确保用户输入数据符合特定要求。无论是简单的单字段校验还是复杂的多字段验证,Vue.js 均提供了简洁有效的解决方案,有效提升了表单处理效率及用户体验。通过综合运用 v-model 和自定义验证,开发者能够实时反馈错误信息并控制表单状态,从而增强应用的交互性与可靠性。
213 0
|
存储 JavaScript 前端开发
js登陆验证
js登陆验证
109 0