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

Question

我一直在绞尽脑汁想弄明白这个问题。

我现在运行 jquery 2.2.2 使用 jquery 验证插件。 https://jqueryvalidation.org/ 和 Trumbowyg 所见即所得编辑器。 https://alex-d.github.io/Trumbowyg/

它很棒，但大多数情况下一切正常，每次用户点击或真正执行任何操作时。您收到控制台错误 Uncaught TypeError: Cannot read property 'nodeName' of undefined。它还会导致 Trumbowyg 的某些部分无法正常工作。

所以我的解决方案是在 jquery 验证插件上使用忽略 class。但它不起作用。我已经尝试忽略几乎每个 class 不同字段的标签，无论我做什么，它都不会被忽略。

那么如何使用 jquery 验证插件和 trumbowyg 文本编辑器？

这是我的验证码。

$('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();
    }
});

我确实删除了验证插件，trumbowyg 的所有内容都可以正常工作。所以也许是时候找到一个新的验证插件了，我真的很想避免这种情况。

更新：我确实注意到 firefox 给我一个不同的错误，所以我想我也会分享它。

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

这里应该有一个问题示例可供演示：http://develop.chrischampeau.com/admin/test.php

Answer 1

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

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

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

此线程中提出了修改/破解以解决该问题，但修复此相同问题的 pull request 已于 5 月合并到该项目中。

问题是最新版本是 2 月发布的，因此目前无法进行合并。根据这个other issue, a maintainer stated 15 hours ago that a release is coming very soon and it includes the fix解决你的问题

如果您等不及新版本的发布，您可以随时从他们的存储库中获取最新版本，或者自行挑选包含在此 pull request 中的修复程序。

关于您在应用拉取请求中的修复后在评论中描述的第二个问题，jQuery Validation 检查各种事件（onfocusout 特别是在这种情况下）是否应忽略某个元素或不是通过检查它是否在设置中指定了 class。

您正在添加到文本区域 class="advanced" 以忽略它，不幸的是，当 Trumbowyg 初始化时，创建的包装器将如下所示：

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

它不会将 advanced class 传播到包装器。一个潜在的解决方法是在初始化 Trumbowyg 时自己添加这个 class 。为此，您可以通过修改构造函数来依赖 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 class，以便 jQuery Validation 可以使用它。

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

关于第二个问题，它的触发是因为某些库在打开弹出窗口时喜欢 Trumbowyg（例如您在评论中提到的那些：Insert Link、Insert Image 等），它们实际上是在 DOM 中附加了一个 <form>，但在另一个 <form> 中附加了一个 <form>，这导致了嵌套形式.

在嵌套表单的情况下，您提到的第二个错误是由 jQuery 验证触发的。您可以在这条消息上查看jQuery Validation插件所有者关于此问题的评论：

Nesting forms is invalid HTML. Either the [...] plugin doesn't generate a form if there is already one, or it has to append it outside the current form.

Trumbowyg Github 上已经有一个关于这个问题的问题，但它是对插件核心的重大修改，目前，它自 2015 年以来已从一个里程碑移动到另一个里程碑。

Answer 2

如果每当 jQuery 验证尝试启动 Trumbowyg 元素时，您仍然在第 jquery.validate.min.js:formatted:490 行收到以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'replace')

尝试将随机值添加到 trumbowyg-editor div 中的 id 属性。这样的事情会起作用：

$(".trumbowyg").find(".trumbowyg-editor").attr("id", Math.random());

这可能不会启动实际验证，但会消除错误。

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

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

javascript

jquery

validation

wysiwyg

trumbowyg