JQuery重复校验导致出现双重提示的问题记录

简介: 最近在用JQuery Validate做表单校验时,由于需要校验用户名:1、是否符合注册规则;2、是否为空;3、是否已被注册;4、是否包含特殊字符,但问题来了,第一次点击是校验非空,但输入非法的用户名后会提示不符合注册规则,遂将其删掉,这时便出现了所述问题:既校验了非空,又校验了注册规则。

JQuery重复校验导致出现双重提示的问题记录


一、背景


最近在用JQuery Validate做表单校验时,由于需要校验用户名:1、是否符合注册规则;2、是否为空;3、是否已被注册;4、是否包含特殊字符,但问题来了,第一次点击是校验非空,但输入非法的用户名后会提示不符合注册规则,遂将其删掉,这时便出现了所述问题:既校验了非空,又校验了注册规则。


二、解决办法


其实解决方案也是比较简单,就是在新输入时将上一次的错误校验清除掉再对输入的内容进行重新校验,不管前面输入的内容是否有误,这样就能保持同时只校验一项内容。


三、代码示例


$("#submitFormId").validate({
  onkeyup : false,
  //errorClass : "errormessage",
  //errorClass : 'error',
  //validClass : 'valid',
  errorClass: 'error',
  validClass: 'valid',
  onfocusout: function(element){
  var elem = $(element);
  elem.valid();
  },
  success : function(element) {
  //alert(element.attr("id"));
    //$.noop;
    var elem = $(element);
    elem.poshytip('disable');
    elem.poshytip('destroy');
  },
  errorPlacement : function(error, element){
    var elem = $(element);
        //在此处增加下面两行
    elem.poshytip('disable');
    elem.poshytip('destroy');
    //
        if (!error.is(':empty')) {
      //右:x=right;y=center 
      //左:x=left;y=center 
      //上:x=inner-left 
      //下:x=center;y=bottom 
      var aX = "right";
      if (elem.attr("positionX") != null) {
        aX = elem.attr("positionX");
      }
      var aY = "center";
      if (elem.attr("positionY") != null) {
        aY = elem.attr("positionY");
      }
      if("SELECT"==elem.get(0).tagName){
      elem.filter(':not(.valid)').poshytip({
         showTimeout: 0,
        showOn : 'none',
        content : error,
        alignTo : 'target',
        alignX : aX,
        alignY : aY,
        offsetX : 5,
        offsetY : 5
      });
      }else{
        elem.filter(':not(.valid)').poshytip({
         showTimeout: 0,
        showOn : 'hover',
        content : error,
        alignTo : 'target',
        alignX : aX,
        alignY : aY,
        offsetX : 5,
        offsetY : 5 
        });
      }
    } else {
      elem.poshytip('disable');
      elem.poshytip('destroy');
    }
  },
  highlight:function(element, errorClass, validClass) {
    $(element).removeClass('valid').addClass('error');
  }
});
});


目录
相关文章
|
JavaScript 前端开发
前端基础 - JQuery自定义校验器
前端基础 - JQuery自定义校验器
82 0
|
XML JSON JavaScript
基于jquery+html开发的json格式校验工具
JSON是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。
90 0
|
JavaScript 前端开发
前端基础 - JQuery 简单的表单校验器
前端基础 - JQuery 简单的表单校验器
62 0
|
JavaScript 测试技术
Easyui 修改jquery validatebox为英文校验提示为中文提示
Easyui 修改jquery validatebox为英文校验提示为中文提示
133 0
|
JavaScript 前端开发
将jquery validate校验框架的remote异步验证设置为同步校验
将jquery validate校验框架的remote异步验证设置为同步校验
365 0
将jquery validate校验框架的remote异步验证设置为同步校验
|
JavaScript
关于JQuery validate表单校验插件对级联下拉框的校验问题
关于JQuery validate表单校验插件对级联下拉框的校验问题
255 0
关于JQuery validate表单校验插件对级联下拉框的校验问题
|
JavaScript Java
动态添加表格并增加Jquery校验
动态添加表格并增加Jquery校验
105 0
|
JavaScript
jquery 正则校验重复字符
正则表达式 jquery实现 校验效果 或循环遍历校验
jquery 正则校验重复字符
|
JavaScript 前端开发 Java
为eclipse添加jquery语法提示
为eclipse添加jquery语法提示
185 0
为eclipse添加jquery语法提示
|
JavaScript API 数据安全/隐私保护
jquery提示插件qtip2使用(全面)
jquery提示插件qtip2使用(全面)
178 0
jquery提示插件qtip2使用(全面)