測試發現IE9切到IE7相容模式後,jquery.validate.js的驗證功能完全失效,不做任何檢核就送出表單。

追進原始碼,發現問題出在jquery.validate.js (ver 1.8)裡elements()函數的寫法:

elements: function() {
    var validator = this,
        rulesCache = {};
 
    // select all valid inputs inside the form (no submit or reset buttons)
    // workaround $Query([]).add until http://dev.jquery.com/ticket/2114 is solved
    return $([]).add(this.currentForm.elements)
    .filter(":input")

再深入追查,form.elements意指<form>下所有元素的集合,發現在IE7相容模式下,form.elements.length確實等於集合元素的數量沒錯,但$(form.elements).length卻恆等於1,這導致程式找不到<form>裡的輸入欄位,因此不會觸發任何檢核動作。但同樣的程式碼在IE9標準模式、Firefox、Chrome均運作正常,$(form.elements).length就等於form.elements.length,判定此為IE7模式下的專屬案例!

在jsFiddle做了一個即溶茶包,經噗友幫忙驗證此點確為IE9行為,不是我人品有問題(感謝大家相助),但仍禁不住悲從中來,發愁在趕專案還踩到大地雷... 含淚爬文看到有人提及jquery.validate 1.8.1,才警覺專案中沒有用最新版的jquery.validate,檢視1.8.1版的elements()寫法:

elements: function() {
    var validator = this,
        rulesCache = {};
 
    // select all valid inputs inside the form (no submit or reset buttons)
    return $(this.currentForm)
    .find("input, select, textarea")
    .not(":submit, :reset, :image, [disabled]")

看起來jquery.validate 1.8.1版已調整寫法,避開了前述地雷。而在換成1.8.1版後,網頁檢核功能在IE7相容模式下亦可正常執行無誤,有驚無險再過一關!


Comments

# by johny.horper1985@gmail.com

Thanks mat for this wonderful information about bags shooter compatibility mode that does not work in IE7. Thanks.

# by Chan

所以我每次要弄新 project 時都確保每隻 plugin 都是最新版 XD

# by johny.horper1985@gmail.com

Nice blog.. &nbsp;Thank you for sharing this informative content.I hope to see more content like this.Keep on posting! Great job! Keep it up. Thanks.

Post a comment