解决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 05 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery HTML css()方法与css类实例详解
May 20 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 getsiteurl()函数
2009/09/05 PHP
php中cookie的使用方法
2014/03/29 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
zookeeper python接口实例详解
2018/01/18 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
Python中itertools的用法详解
2020/02/07 Python
python中for in的用法详解
2020/04/17 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
应聘医药代表职位求职信
2013/10/21 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
《自选商场》教学反思
2014/02/14 职场文书
讲座主持词
2014/03/20 职场文书
民主生活会剖析材料
2014/09/30 职场文书
开国大典观后感
2015/06/04 职场文书