解决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实现拼图小游戏(实例讲解)
Jul 24 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
jQuery冲突问题解决方法
Jan 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
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
php设计模式之单例模式代码
2016/06/11 PHP
PHP强制转化的形式整理
2020/05/22 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
python中的yield使用方法
2014/02/11 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
Django异步任务线程池实现原理
2019/12/17 Python
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
年终考核评语
2014/01/19 职场文书
中职招生先进个人材料
2014/08/31 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
python 中yaml文件用法大全
2021/07/04 Python