解决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 EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
js不是基础的基础
2006/12/24 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python利用ansible分发处理任务
2015/08/04 Python
Python实现文件复制删除
2016/04/19 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
详解python中@的用法
2019/03/27 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
腾讯广告词
2014/03/19 职场文书
体育活动总结范文
2014/05/04 职场文书
学习作风建设心得体会
2014/10/22 职场文书
杭白菊导游词
2015/02/10 职场文书
2015教师年度考核评语
2015/03/25 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python