[contenteditable]元素和jQuery驗證插件的問題

Question

我準備了DEMO其中演示[contenteditable]元素沒有HTML表單。至於我，這是一個問題，因爲jQuery驗證插件需要形式。看看源代碼片段from here從383行開始：

function delegate(event) { 
    var validator = $.data(this.form, "validator"), 
     eventType = "on" + event.type.replace(/^validate/, ""), 
     settings = validator.settings; 
    if (settings[ eventType ] && !$(this).is(settings.ignore)) { 
     settings[ eventType ].call(validator, this, event); 
    } 
} 

$(this.currentForm) 
    .on("focusin.validate focusout.validate keyup.validate", 
     ":text, [type='password'], [type='file'], select, textarea, [type='number'], [type='search'], " + 
     "[type='tel'], [type='url'], [type='email'], [type='datetime'], [type='date'], [type='month'], " + 
     "[type='week'], [type='time'], [type='datetime-local'], [type='range'], [type='color'], " + 
     "[type='radio'], [type='checkbox'], [contenteditable]", delegate) 

    // Support: Chrome, oldIE 
    // "select" is provided as event.target when clicking a option 
    .on("click.validate", "select, option, [type='radio'], [type='checkbox']", delegate); 

在這裏我們可以看到，要素，其中之一是[contenteditable]監聽事件，然後調用delegate事件處理程序。

當[contenteditable]觸發從這個列表中的某些事件，delegate方法試圖從元素var validator = $.data(this.form, "validator")驗證，但正如我前面所說[contenteditable]沒有表（見DEMO）。

有什麼辦法可以解決這個問題嗎？可能是所有[contenteditable]元素都可以添加表單？

Answer 1

這是jquery validator plugin一個已知的bug。然而，這已經在這個pull request已經修復，應該很快就會發布。

修復1：

如果你不能等待發布，解決方法是把這個代碼在delegate()方法的開始。該解決方案由@svrx完成。

// Set form expando on contenteditable 
if (!this.form && this.hasAttribute("contenteditable")) { 
    this.form = $(this).closest("form")[ 0 ]; 
} 

正如你所看到的修復只是將窗體設置爲父元素。

修復2：

由於@chrisAtomix在他comments說，不使用最新jquery validator plugin。而是使用較低的版本，其中contenteditable功能尚未添加。他正在使用v1.14.0。

Answer 2

確實探索了驗證的忽略選項解決您的問題？

ignore: ":hidden:not('#summernote')" 

更新小提琴 - https://jsfiddle.net/z6eLvk0b/2/