記一次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