[contenteditable] 元素和 jQuery 验证插件的问题

Question

我准备了一个DEMO which demonstrates [contenteditable] element has no HTML form. As for me, it's a problem, because jQuery validation plugin need form. Look at the source code snippet 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

探索验证的忽略选项是否解决了您的问题？

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

已更新 fiddle - https://jsfiddle.net/z6eLvk0b/2/

Answer 2

这是 jquery validator plugin 中的一个已知错误。但是，此 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.

[contenteditable] 元素和 jQuery 验证插件的问题

Problems with [contenteditable] elements and jQuery validation plugin

javascript

forms

jquery

jquery-validate

contenteditable

修复 1：

修复 2：