Trumboqyg WYSIWYG 编辑器不适用于 Jquery.Validate 插件,“Uncatch TypeEr

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

本文关键字:插件 Uncatch TypeEr Validate Jquery WYSIWYG 编辑器 不适用 适用于 Trumboqyg      更新时间:2023-09-26

我一直在拔头发试图弄清楚这一点。

我目前正在使用 jquery 验证插件运行 jquery 2.2.2。 https://jqueryvalidation.org/和Trumbowyg WYSIWYG编辑。https://alex-d.github.io/Trumbowyg/

这很棒,但是,每次使用点击或真正执行任何操作时,大多数事情都可以正常工作。 您收到控制台错误Uncaught TypeError: Cannot read property 'nodeName' of undefined 。 它还会使Trumbowyg的某些部分无法正常工作。

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

那么如何使用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

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

您可以找到描述完全相同问题的此问题:

  • 打破你的所见即所得。
  • 未定义的错误。
  • 所见即所得的所有工具栏按钮只需单击两次即可触发。

在此线程中提出了修改/黑客来解决此问题,但是解决相同问题的拉取请求已在 5 月合并到项目中。

问题是最新版本是从 2 月份开始的,因此此合并目前不可用。根据另一个问题,维护人员在 15 小时前表示,即将发布一个版本,其中包括针对您的问题的修复程序。

如果您迫不及待地等待新版本,您可以随时从他们的存储库中获取最新版本,或者挑选此拉取请求中包含的修复程序。

关于您在从拉取请求中应用修复程序后在评论中描述的第二个问题,jQuery 验证通过检查元素是否应忽略各种事件(onfocusout尤其是在这种情况下)检查是否应忽略该元素设置中指定的类。

您正在添加到文本区域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 验证可以使用它。

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

关于第二个问题,之所以触发它,是因为像 Trumbowyg 这样的库在打开弹出窗口时(如您在评论中提到的那些:插入链接插入图像等),它们实际上是在 DOM 中附加一个<form>,但在另一个<form>中,这会导致嵌套表单。

对于嵌套表单,您提到的第二个错误是由 jQuery 验证触发的。您可以在此消息上查看 jQuery 验证插件所有者关于此问题的评论:

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

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

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

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

尝试向div 中的id属性添加一个随机值trumbowyg-editor。这样的东西会起作用:

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

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