如何使用jQuery Validate验证TINYMCE编辑器

Question

我正在创建一个表单，我想验证我的表单（包括tinymce editor textarea）。

这是我的代码。

$('#edit_info').validate({
    errorElement: 'span',
    errorClass: 'error',
    focusInvalid: false,
    ignore: "",
    rules: {
        title: {
            required: true
        },
        logo: {
            required: true
        },
        sort: {
            required: true
        },
        show_on_dashboard: {
            required: true
        },
        description: {
            required: true
        }
    }
});

但我必须按“提交”2次然后验证发生。知道为什么吗？

Answer 1

当TinyMCE被注入页面时，原始表单元素（例如<textarea>）不再可见。如果您使用浏览器工具，您会看到TinyMCE注入了一系列<div>和<iframe>，有效地隐藏了您的<textarea>。

因此，如果你要求jQuery查看<textarea>中的值，它可能仍然具有从你第一次加载TinyMCE时的初始值。

为了让jQuery验证基础<textarea>，您首先必须使用TinyMCE的当前内容更新<textarea>。为此，您需要使用triggerSave() API。这将迫使TinyMCE立即使用编辑器中的当前值更新基础<textarea>。