解决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 Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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
Terran剧情介绍
2020/03/14 星际争霸
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
php+MySQL判断update语句是否执行成功的方法
2014/08/28 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
浅谈Django REST Framework限速
2017/12/12 Python
TensorFlow变量管理详解
2018/03/10 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
会计自我鉴定
2014/02/04 职场文书
个人银行贷款担保书
2014/04/01 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
python四种出行路线规划的实现
2021/06/23 Python