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

最近在用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