解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法

在使用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"就可以消除这个问题

以上就是全部知识点内容，需要的朋友们可以参考下。

赞 (0)

相关推荐

  • 解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法

    在使用validate进行表单验证时会有第一次验证通过,但是第二次验证不通过时,第一次验证通过的信息残留在label上面的情况,最常见的就是√残留 如此图所示: 此时"请输入姓名"前面应该时×才是正常情况.如何解决这个问题? 需要对jquery.validate.js文件进行修改,原因如下: 一次验证成功但是二次验证失败后,会进入如下代码: showLabel: function( element, message ) { var place, group, errorID, erro

  • 基于Bootstrap+jQuery.validate实现表单验证

    基于Bootstrap+jQuery.validate实现表单验证

    这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤为重要. 用户注册和登录其实往往比我们想象的难.就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解: 1.正则表达式的基本了解 其实正则并不难,并且在学会后能带给你极大的成就感,享受那种事半功倍的效果吧. 2.ajax异步请求 在验证用户名是否存在.用户登录时账号或者密码错误时给出相应的

  • jQuery.validate.js表单验证插件的使用代码详解

    Validate Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML.CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证. 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi

  • jQuery validate插件实现ajax验证重复的2种方法

    本文实例讲述了jQuery validate插件实现ajax验证重复的2种方法.分享给大家供大家参考,具体如下: jquery validate 经过这种多年的改良,已经很完善了.它能满足80%的验证需要,如果validate自带的功能,不能满足我们需求,它提供了addMethod来扩展功能.下面就举个小例子来说明一下addMethod的用法. 完整demo实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//

  • jquery validate.js表单验证入门实例（附源码）

    jquery validate.js表单验证入门实例（附源码）

    小编上网查阅了许多关于jquery.validate的文章,大部门只是介绍它的api和用法,没有一个详细的的入门案例介绍,研究了半天还是无从下手.为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家. 以下是validate.js表单验证入门实例参考源码,文章下面有源码下载地址: <html> <head> <meta http-equiv="Content-Type" content=

  • jQuery Validate插件ajax方式验证输入值的实例

    项目中经常会遇到需要后台验证问题,如用户名.用户账号是否存在等.使用jQuery Validate插件可以使用remote校验规则完成验证. 示例: 一.基本用法 1.需要验证的表单 <form id="registForm"> <input type="text" id="username" name="username"> </form> 2.js 使用remote校验规则,最简单粗暴的

  • 完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题

    如果用slideToggle,鼠标快速滑过后,滑进滑出很多次,要解决这个问题,用stop(false,true) $(".Nav_L").hover(function () { $(".Cate2").stop(false,true).slideToggle(500); }); 以上这篇完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码

  • 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

  • 详解jquery validate实现表单验证 （正则表达式）

    一.目的 为了更好地实现人机交互,使用jQuery封装库中的validate插件,在用户填写表单时,可以快速地对用户填写的数据进行验证,并做出反馈. 二.validate插件简介   validate()是插件的核心方法,定义了基本的校验规则和一些有用的配置项. rule:设置表单的验证规则: messages:设置表单不符合验证规则的提示信息: debug:如果这个参数为true,那么表单还会提交,只进行检查,调试时十分方便. required:必填 minlength:最小长度 maxlen

随机推荐