如何使用 jQuery Validate 验证 TINYMCE Editor

Question

我正在创建一个表单，我想验证我的表单（包括 tinymce 编辑器 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
        }
    }
});

但我必须按 'Submit' 2 次，然后才会进行验证。知道为什么吗？

Answer 1

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

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

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

如何使用 jQuery Validate 验证 TINYMCE Editor

How can I validate TINYMCE Editor with jQuery Validate

javascript

jquery

tinymce

jquery-validate