2

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

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

但是，每次使用单击或真正执行任何操作时，大多数情况下都可以正常工作。你得到控制台错误Uncaught TypeError: Cannot read property 'nodeName' of undefined。它还会导致 Trumbowyg 的某些部分无法正常工作。

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

那么如何使用带有 trumbowyg 文本编辑器的 jquery 验证插件呢？

这是我的验证码。

$('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

4

1 回答 1

4

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

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

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

在此线程中提出了修改/破解以解决该问题，但修复此问题的拉取请求已在 5 月合并到项目中。

问题是最新版本是从 2 月开始的，因此目前无法进行此合并。根据this other issue，维护人员在15小时前表示很快就会发布一个版本，其中包含针对您的问题的修复程序。

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

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

您正在添加到您的 textareaclass="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）在打开弹出窗口时（例如您在评论中提到的那些：Insert Link，Insert Image等），它们实际上是<form>在 DOM 中附加 a ，但在另一个<form>导致嵌套形式。

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

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

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

于 2016-07-14T10:57:32.950 回答