解决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滚动插件scrollable.js用法分析
May 25 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
Vuex 入门教程
2018/01/10 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
用Python设计一个经典小游戏
2017/05/15 Python
python 反向输出字符串的方法
2018/07/16 Python
python 用下标截取字符串的实例
2018/12/25 Python
Python理解递归的方法总结
2019/01/28 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
linux比较文件内容的命令是什么
2013/03/04 面试题
电子商务专业实习生自我鉴定
2013/09/24 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
贷款担保书范文
2014/05/13 职场文书
招标授权委托书样本
2014/09/23 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
安全责任协议书范本
2016/03/23 职场文书