记一次jquery validate的扩展（第一次失去焦点时触发校验）

最新推荐文章于 2019-02-18 16:01:02 发布

weixin_34194087

最新推荐文章于 2019-02-18 16:01:02 发布

阅读量661

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python 前端 ViewUI

原文链接：https://my.oschina.net/u/2250875/blog/2250269

本文解决了使用jquery.validate进行前端表单校验时的一个常见问题：首次失去焦点时，若文本框为空且为必填项，校验不会立即触发。通过修改默认设置，实现了即时校验。

2019独角兽企业重金招聘Python工程师标准>>>

最近在用jquery.validate 做前端表单校验，但是发现每次第一次失去焦点时，如果文本框内容为空，且该字段是必填项，

则不会触发校验，直到提交表单后，再次失去焦点时，才会触发，想对此进行扩展，第一次失去焦点时也触发校验（即使文本框未空）。

看了下代码，找到失去焦点事件，发现一共有3个条件，

onfocusout: function( element ) {
			if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {
				this.element( element );
			}
		},

第一个条件，是判断该表单元素是不是选择性的控件，例如单选，多选。这种的话就无法校验了。

第二个条件是判断该元素是否在 submitted 中

第三个条件是判断该元素是否是非必填项。即该元素的值如果非空，则是必填项，需要校验，如果是空的话，就是非必填项。

第一个和第三个条件的逻辑都没问题，关键在第二个条件，发现第一次的时候，submitted是空的，而submitted是在触发整个表单校验时才初始化的，显然这个有点晚了。

于是参考网上的一片文章（见下）改了下，首先判断该元素是否是必填项，如果是则校验。 OK了。

$.extend(true, $.validator, {
        defaults: {
            onfocusout: function (element, event) {
            	
            	if (element.value == "") {//此部分为修改的代码
                    if ($(element).rules().required == true) { 
                        $(element).valid();
                    }
                } else {
	                if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
	                    this.element(element);
	                }
                }
            	
            }
        }
	});

参考：

解决jquery.validate.js的验证bug

转载于:https://my.oschina.net/u/2250875/blog/2250269