[contenteditable]元素和jQuery验证插件存在问题 [英] Problems with [contenteditable] elements and jQuery validation plugin

问题描述

我准备了 DEMO ，该示例演示了[contenteditable]元素没有HTML表单.对我来说，这是一个问题，因为jQuery验证插件需要表格.从这里开始 从383行开始:

I prepared a 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 starting from 383 line:

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事件处理程序.

Here we can see, elements, one of which is a [contenteditable] listen to events and then call delegate event handler.

当[contenteditable]触发此列表中的某个事件时，delegate方法尝试从元素var validator = $.data( this.form, "validator" )中获取验证器，但是正如我之前所说的[contenteditable]没有形式(请参阅

When [contenteditable] trigger some event from this list, delegate method try to get validator from element var validator = $.data( this.form, "validator" ) but as I said earlier [contenteditable] has no form (see DEMO).

有什么办法可以解决这个问题?可能可以将表单添加到所有[contenteditable]元素中吗?

Is there any way to solve this problem? May be it's possible to add form to all [contenteditable] elements?

推荐答案

这是jquery validator plugin中的已知错误.但是，此问题已在拉动请求中得到解决，应尽快发布

This is a known bug in jquery validator plugin. However, this has been fixed now in this pull request, and should be released soon.

如果您不能等待发布，则解决方法是将此代码放在delegate()方法的开头.解决方案是由@svrx提出的.

If you cannot wait for a release, the fix is to put this code at the start of delegate() method. The solution has been made by @svrx.

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

您可以看到，解决方法只是将表单设置为父元素.

As you can see the fix is simply to set the form to the parent element.

如@chrisAtomix在他的评论中所述，请勿使用最新的jquery validator plugin.而是使用未添加contenteditable功能的较低版本.他正在使用v1.14.0.

As @chrisAtomix said in his comments, don't use the latest jquery validator plugin. Instead use a lower version where contenteditable feature has not been added. He is using v1.14.0.

这篇关于[contenteditable]元素和jQuery验证插件存在问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！