解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法


Posted in jQuery onAugust 27, 2019

在使用validate进行表单验证时会有第一次验证通过,但是第二次验证不通过时,第一次验证通过的信息残留在label上面的情况,最常见的就是√残留

如此图所示:

解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法

此时“请输入姓名”前面应该时×才是正常情况。如何解决这个问题?

需要对jquery.validate.js文件进行修改,原因如下:

一次验证成功但是二次验证失败后,会进入如下代码:

showLabel: function( element, message ) {
      var place, group, errorID,
        error = this.errorsFor( element ),
        elementID = this.idOrName( element ),
        describedBy = $( element ).attr( "aria-describedby" );
      if ( error.length ) {
        // refresh error/success class
        error.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );
        // replace message on existing label
        error.html( message );
      } else {
        // create error element
        error = $( "<" + this.settings.errorElement + ">" )
          .attr( "id", elementID + "-error" )
          .addClass( this.settings.errorClass )
          .html( message || "" );

其中会执行 error.removeClass( this.settings.validClass ) 这个代码,我们找到 validClass 后会发现 validClass: "valid",我们一般会将验证成功的类名设置为“success”,所以我们只需要将validClass: "valid"

改为validClass: "success"就可以消除这个问题

以上就是全部知识点内容,需要的朋友们可以参考下。

jQuery 相关文章推荐
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
详解jquery选择器的原理
Aug 01 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
Jquery实现获取子元素的方法分析
Aug 24 #jQuery
jquery分页优化操作实例分析
Aug 23 #jQuery
jquery实现的分页显示功能示例
Aug 23 #jQuery
jQuery表单选择器用法详解
Aug 22 #jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 #jQuery
jquery树形插件zTree高级使用详解
Aug 16 #jQuery
jQuery zTree树插件的使用教程
Aug 16 #jQuery
You might like
php删除字符串末尾子字符,删除开始字符,删除两端字符(实现代码)
2013/06/27 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
php计算一个文件大小的方法
2015/03/30 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
javascript eval函数深入认识
2009/02/21 Javascript
一个tab标签切换效果代码
2009/03/27 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
python计算牛顿迭代多项式实例分析
2015/05/07 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
python实现维吉尼亚算法
2019/03/20 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
应届行政管理专业个人自我评价
2013/12/28 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
入职担保书怎么写
2014/05/12 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
python b站视频下载的五种版本
2021/05/27 Python
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python