Question

I have been pulling my hair out trying to figure this out.

I am running jquery 2.2.2 at the moment with the jquery validation plugin. https://jqueryvalidation.org/ And Trumbowyg WYSIWYG Editor. https://alex-d.github.io/Trumbowyg/

It's great mostly everything works however, every time a use clicks or does anything really. You get the console error Uncaught TypeError: Cannot read property 'nodeName' of undefined. It also creates certain parts of Trumbowyg to not work properly.

So my solution was to use the ignore class on the jquery validation plugin. But it does not work. I have tried ignoring almost every class labeling for different fields and no matter what I do it is never ignored.

So how do I use the jquery validation plugin, with the trumbowyg text editor?

Here is my validation code.

$('form').validate({
    errorPlacement: function (error, element) {
        if ($(element).parent('.input-group').length) {
            error.insertAfter(element.parent().siblings('label'));
            error.addClass('alert alert-danger validate');
        } else {
            error.insertAfter(element.siblings('label'));
            error.addClass('alert alert-danger validate');
        }
    },
    errorElement: 'div',
    highlight: function (element) {
        $(element).parent().addClass("has-error");
    },
    unhighlight: function (element) {
        $(element).parent().removeClass("has-error");
    },
    ignore: '.advanced',
    rules: {
        password_confirm: {
            equalTo: 'input[name=password]'
        },
        user_username: {
            remote: {
                url: 'action/check/',
                type: 'POST',
                data: {
                    id: function () {
                        return $('input[name=id]').val();
                    }
                }
            }
        },
        nav_name: {
            remote: {
                url: 'action/check/',
                type: 'POST',
                data: {
                    id: function () {
                        return $('input[name=id]').val();
                    }
                }
            }
        }
    },
    messages: {
        password_confirm: {
            equalTo: "Passwords must match"
        },
        user_username: {
            remote: "This Username already exists"
        },
        nav_name: {
            remote: "This Nav Item Name already exists"
        }
    },
    submitHandler: function (form) {
        $('button[type="submit"]').addClass('disabled').prop('disabled', true).prepend('<span class="bootstrap-dialog-button-icon glyphicon glyphicon-asterisk icon-spin"></span>');
        form.submit();
    }
});

I did remove the validation plugin and everything with trumbowyg did work. So maybe it's time to find a new validation plugin, I really would like to avoid that.

Update: I did notice that firefox is giving me a different error, so I figured I would share that as well.

TypeError: owner is undefined
owner[ this.expando ] && owner[ this.expando ][ key ];

An example of the problem should be available to demo here: http://develop.chrischampeau.com/admin/test.php

Answer 1

这是jQuery Validation插件的已知问题，其中表单中的内容可编辑元素会在触发事件时导致异常。

您可以找到描述完全相同问题的this issue：

打破你的WYSIWYG。
未定义的错误。
WYSIWYG中的所有工具栏按钮都需要两次点击才能触发。

此线程中提出了修改/黑客来解决此问题，但修复此问题的pull request已于5月合并到项目中。

问题是最新版本是从二月开始的，因此此合并暂时无法使用。根据这个other issue，一位维护者在15小时前说过很快就会发布一个版本，它包含the fix来解决你的问题。

如果您不能等待新版本，您可以随时从其存储库中获取最新版本，或者自己选择此pull request中包含的修复程序。

关于在应用拉取请求中的修复后，您在评论中描述的第二个问题，jQuery Validation检查各种事件（onfocusout，尤其是在这种情况下），如果元素应该被忽略或不被检查它是否具有在设置中指定的类。

您正在添加到您的textarea class="advanced"以忽略它，遗憾的是，当初始化Trumbowyg时，创建的包装将如下所示：

<div class="trumbowyg-editor trumbowyg-reset-css" contenteditable="true" dir="ltr" placeholder="">

它不会将advanced类传播给包装器。一个潜在的解决方法是在初始化Trumbowyg时为自己添加这个类。为此，您可以通过修改构造函数来依赖tbwinit事件。

// Setup WYSIWYG
$('textarea.advanced').trumbowyg( {
    resetCss: true,
    removeformatPasted: true,
    autogrow: true,
    btnsDef: {
    // Customizables dropdowns
        image: {
            dropdown: ['insertImage', 'upload', 'base64', 'noEmbed'],
            ico: 'insertImage'
        }
    },
    btns: [
        ['viewHTML'],
        ['undo', 'redo'],
        ['formatting'],
        'btnGrp-design',
        ['link'],
        ['image'],
        'btnGrp-justify',
        'btnGrp-lists',
        ['foreColor', 'backColor'],
        ['preformatted'],
        ['horizontalRule'],
        ['fullscreen']
    ],
    plugins: {
        // Add imagur parameters to upload plugin
        upload: {
            serverPath: 'https://api.imgur.com/3/image',
            fileFieldName: 'image',
            headers: {
                'Authorization': 'Client-ID 9e57cb1c4791cea'
            },
            urlPropertyName: 'data.link'
        }
    }
}).on('tbwinit', function(){
  $('.trumbowyg-editor').addClass('advanced');
});

初始化后，您的包装器将包含advanced类，以便jQuery Validation可以使用它。

<div class="trumbowyg-editor trumbowyg-reset-css advanced" contenteditable="true" dir="ltr" placeholder="">

关于第二个问题，它被触发是因为某些库（如Trumbowyg）打开弹出窗口时（就像您在评论中提到的那样：插入链接，插入图像< / em>等等，它们实际上是在DOM中添加<form>但在另一个<form>内部会导致嵌套表单。

对于嵌套表单，您提到的第二个错误是由jQuery Validation触发的。您可以在jQuery Validation上查看this message插件所有者对此问题的评论：

嵌套表单是无效的HTML。 [...]插件如果已经存在，则不会生成表单，或者必须将表单附加到当前表单之外。

关于这个问题Trumbowyg Github已经开启了一个问题，但这是对插件核心的一个大修改，此时，自2015年以来，它已从里程碑转移到里程碑。

Trumboqyg WYSIWYG editor does not work with Jquery.Validate plugin, "Uncaught TypeError: Cannot read property 'nodeName' of undefined"

1 个答案: