解决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去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery实现可以扩展的日历
Dec 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
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
js函数般调用正则
2008/04/08 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
5种Python单例模式的实现方式
2016/01/14 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
python+opencv实现动态物体识别
2018/01/09 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
使用python爬取B站千万级数据
2018/06/08 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
Python爬虫包BeautifulSoup实例(三)
2018/06/17 Python
python 实现A*算法的示例代码
2018/08/13 Python
Python实现全排列的打印
2018/08/18 Python
Python 文件数据读写的具体实现
2020/01/24 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
python实例化对象的具体方法
2020/06/17 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
法律工作求职自荐信
2013/10/31 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
爱心捐书活动总结
2014/07/05 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书