解决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 ui sortable拖拽后保存位置
Apr 27 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jquery实现吸顶导航效果
Jan 08 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 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
Python实现统计文本文件字数的方法
2017/05/05 Python
python实现大转盘抽奖效果
2019/01/22 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
测量工程专业求职信
2014/02/24 职场文书
火锅店营销方案
2014/02/26 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
Python 数据可视化之Bokeh详解
2021/11/02 Python