无法让 TinyMCE 与 jQuery Unobtrusive Validation 一起使用

Question

我有一个使用不显眼的验证的表单，并且对我的所有字段都按预期工作，但是一旦我添加了 TinyMCE（或任何其他所见即所得的编辑器），它使用的 textarea 就会被隐藏并阻止该字段被包含在客户端中侧验证。有没有一种方法可以连接到验证中以包含这个隐藏字段，或者可能有一种不同的方法来隐藏 textarea 以便在回发之前对其进行验证？

Answer 1

这周我遇到了同样的问题。最终解决了这个问题：

// sync tinymce content to validate before submitting form
$('form input[type=submit]').click(function () {
    tinyMCE.triggerSave();
});

...我们也使用了保存插件，但是为了让它触发验证，必须把它放在 TinyMCE 编辑器模板中：

function onSavePluginCallback(ed) {
    var form = $(ed.formElement);
    var isValid = form.valid();
    if (isValid) {
        form.submit();
    }
}

(function () {

    tinyMCE.init({
        ...
        save_onsavecallback: 'onSavePluginCallback',
        ...

更新

这确实是有道理的，因为 textarea 在隐藏时不会被不显眼地验证。我忘了添加另一段我必须完成这项工作的 javascript：

$.validator.setDefaults({
    ignore: ''
});

默认情况下，jquery validate 会忽略不可见的字段。忽略参数的默认值为 ':hidden'。通过将其设置为空字符串，您是在告诉 jquery validate 不要忽略隐藏的输入。

Answer 2

我现在想出的是取消隐藏textarea，然后将其浮出屏幕。然后按照@danludwig 所说的，我在提交时触发了保存事件。

$(function () {
    var tinymce = $('#Content');
    tinymce.tinymce({
        setup: function (e) {
            e.onInit.add(function () {
                tinymce.css({
                    position: 'absolute',
                    height: 0,
                    width: 0,
                    top: -100
                }).show();
            });
        }
    });

    $('form input[type=submit]').click(function () {
        tinyMCE.triggerSave();
    });
});

我也在使用Bootstrap，所以为了让这个完全与 jQuery Validate/Unobtrusive Validation 一起工作，我在页面顶部添加了以下内容。

// makes form field highlighting work with bootstrap's css
$.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        $(element).closest('.control-group').addClass('error');
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).closest('.control-group').removeClass('error');
    }

});
$(function () {
    // makes form field highlighting work with bootstrap's css on post backs
    $('.input-validation-error').each(function (i, element) {
        $(element).closest('.control-group').not('.error').addClass('error');
    });
});

为了在出现错误时突出显示 TinyMCE 编辑器，我将其添加到样式表中。

.control-group.error table.mceLayout,
.control-group.error table.mceLayout tr.mceFirst td,
.control-group.error table.mceLayout tr.mceLast td {
    border-color: #b94a48;
}

Answer 3

在我的情况下：tinyMCE 4、Bootstrap 2.3.1 和 jQuery validate 1.9 这是有效的：

$('#form1').data('validator').settings.ignore = '';

确保将该行放在您的文档就绪函数中。这样做的原因是因为我在同一页面上有其他表单需要继续使用默认值：不要验证“：隐藏”字段。查看jQuery Validate - Enable validation for hidden fields 了解完整说明。

bootstrap 和新版 tinyMCE 的 css 会是这样的：

.control-group.error .mce-panel {
border-color: #b94a48;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

}

Answer 4

我尝试了这个解决方案以及其他一些类似的解决方案，但无法让其中任何一个工作，这就是我想出的。这不是一个完美的解决方案，但可以完成我需要的工作。我没有向页面添加任何其他附加代码。

$('form button[type=submit]').not('.cancel').click(function () {
  var form = $('#FormName');
  var isValid = form.valid();
  var istinymceValid = $('#ContentField').valid();
  if (!isValid || !istinymceValid) {
    return false;
  }
  return true;
});

Answer 5

这对我有用...

    $(function () {
        var myForm = $('#MyFormId');

        $.data(myForm[0], 'validator').settings.ignore = "null";

        tinymce.init({
            selector: '.MyTextareaClass',
            height: 200,
            setup: function (editor) {
                editor.on('keyUp', function () {
                    tinyMCE.triggerSave();

                    if (!$.isEmptyObject(myForm.validate().submitted))
                        myForm.validate().form();
                });
            },
            relative_urls: false,
            theme: "modern",
            plugins: [
                "advlist autolink lists link image charmap print preview hr anchor pagebreak",
                "searchreplace wordcount visualblocks visualchars code fullscreen",
                "insertdatetime media nonbreaking save table contextmenu directionality",
                "template paste"
            ],
            paste_as_text: true,
            toolbar1: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | print preview"
        });
    });

Answer 6

自从以前的答案写出来以来，事情可能已经发生了变化，因为这是一个非常古老的问题，但我的解决方案再次借鉴了已经编写的内容并对其进行了简化。假设您使用 TinyMCE 的文本字段仅需要在提交表单时验证，而不是在每次按键时验证，这将起作用。

1. 将 CSS 类添加到将被 TinyMCE 编辑器替换的文本区域：

<textarea id='myTextArea' class='hidden-by-tinymce' rows='10'></textarea>

1. 根据the docs修改 jQuery 验证的配置，使您的 textarea 不会被忽略：

$.validator.setDefaults({
    ignore: 'hidden:not(.hidden-by-tinymce)'
});

1. 确保在提交表单时调用 TinyMCE 编辑器的 triggerSave() 方法：

$('#myForm').submit(function(e) {
    e.preventDefault();
    tinyMCE.triggerSave(); // this is the key to making sure the TinyMCE editor is validated
    let $form = $(this);
    let isValid = $form.valid();
    if (isValid) {
        $form.submit();
    }
});

这就是我所需要的。