解决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插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 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
融入意大利的咖啡文化
2021/03/03 咖啡文化
javascript,php获取函数参数对象的代码
2011/02/03 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
浅谈javascript的调试
2015/01/28 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
jquery实现数字输入框
2017/02/22 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
python中退出多层循环的方法
2018/11/27 Python
对python生成业务报表的实例详解
2019/02/03 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
西班牙在线药店:DosFarma
2020/03/28 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
两只小狮子教学反思
2014/02/05 职场文书
《童趣》教学反思
2014/02/19 职场文书
文艺演出策划方案
2014/06/07 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL