解决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实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jQuery中event.target和this的区别详解
Aug 13 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文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
PHP 面向对象详解
2012/09/13 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
通过Python实现一个简单的html页面
2020/05/16 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
销售总监岗位职责
2014/01/04 职场文书
绿化工程实施方案
2014/03/17 职场文书
班级年度安全计划书
2014/05/01 职场文书
百日安全活动总结
2014/05/04 职场文书
明星员工获奖感言
2014/08/14 职场文书
爱国教育主题班会
2015/08/14 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏