解决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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jQuery实现购物车全功能
Jan 11 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 explode()函数用法、切分字符串
2012/10/03 PHP
关于php循环跳出的问题
2013/07/01 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
vue实现评价星星功能
2020/06/30 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python 读写中文json的实例详解
2017/10/29 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
产品设计开发计划书
2014/05/07 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
2016年教代会开幕词
2016/03/04 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
canvas实现贪食蛇的实践
2022/02/15 Javascript
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS