Question

我有一个使用不引人注目的验证的表单，并且按照我所有字段的预期工作但是一旦我添加了TinyMCE（或任何其他WYSIWYG编辑器），它使用的textarea就会被隐藏并阻止该字段被包含在客户端中 - 验证。有没有办法可以挂钩验证以包含这个隐藏字段，或者可能采用不同的方式隐藏textarea以便在回发之前验证它？

Answer 1

本周我遇到了同样的问题。结束了解决它：

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

...我们也使用了save插件，但是为了让它能够触发验证，不得不把它放在TinyMCE编辑器模板中：

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

(function () {

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

<强>更新

这确实有意义，即textarea在隐藏时不会被不引人注意地验证。我忘了添加另一段我必须做的工作：

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

默认情况下，jquery validate会忽略不可见的字段。 ignore参数的默认值为'：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验证1.9这是有效的：

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

确保将该行放入文档就绪功能中。原因是因为我在同一页面上有其他表格需要继续使用默认值：不验证'：hidden'字段。请查看jQuery Validate - Enable validation for hidden fields以获取完整说明。

bootstrap的css和tinyMCE的新版本将是这样的：

.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的文本字段仅在提交表单时才需要验证，而无需在每次按键时都进行验证，那么这将起作用。

在textarea中添加一个CSS类，该类将被TinyMCE编辑器替换：

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

按照the docs，修改jQuery验证的配置，以使您的文本区域不会被忽略：

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

确保在提交表单时调用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();
    }
});

那是我所需要的。

无法让TinyMCE使用jQuery Unobtrusive Validation

6 个答案: