【问题标题】：Problems with [contenteditable] elements and jQuery validation plugin[contenteditable] 元素和 jQuery 验证插件的问题
【发布时间】：2016-04-03 09:19:58
【问题描述】：

我准备了一个 DEMO 来演示 [contenteditable] 元素没有 HTML 表单。对我来说，这是一个问题，因为 jQuery 验证插件需要表单。从383行开始看源码sn -p from here：

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] 元素？

【问题讨论】：

标签： javascript jquery forms jquery-validate contenteditable

【解决方案1】：

这是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。

【讨论】：

谢谢。现在我使用v1.14.0 并等待发布

【解决方案2】：

探索 validate 的忽略选项能解决您的问题吗？

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

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

【讨论】：