jQuery 验证插件 + CKEditor - 输入时验证答案

【问题标题】：jQuery validation plugin + CKEditor - validate when typingjQuery 验证插件 + CKEditor - 输入时验证
【发布时间】：2009-12-15 16:21:27
【问题描述】：

我在 textarea 上使用 CKEditor 和 jQuery 验证插件 (http://bassistance.de/jquery-plugins/jquery-plugin-validation/)

使用 jQuery 插件可以将字段标记为空或必填。当一个字段例如“产品名称”为空，提交表单时该字段将被标记为无效。

但是，在输入“产品名称”时，该字段将在输入时自动标记为有效。这很好，但我希望我的启用 CKEditor 的 textarea 也一样。纯文本区域一切正常（输入文本时，该字段变为有效），但是在将 CKEditor 添加到文本区域后，这不再起作用了。

从那时起，您必须在 CKEditor textarea 重新验证之前单击提交按钮。

关于如何完成这项工作的任何想法？

更新：

我尝试了您给我的线程中的解决方案，但它不起作用： Using jQuery to grab the content from CKEditor's iframe

我有：

CKEDITOR.instances["page_content"].document.on('keydown', function(event)
                {
                    CKEDITOR.tools.setTimeout( function()
                    { 
                        $("#page_content").val(CKEDITOR.instances.page_content.getData()); 
                    }, 0);
        });

但这一直给我：“CKEDITOR.instances.page_content.document 未定义”

我的 textare 的 id 是“page_content”

点击按钮后效果很好，但正如你所见，我需要以某种方式触发 keydown 事件

$("#btnOk").click(function(event) {
            CKEDITOR.instances.page_content.updateElement(); //works fine
});

更新 2：

这段代码是正确的，它将数据从 CKEDITOR 获取到我的 textarea 中，但我的验证插件仍然没有发生任何事情，它没有在 CKEditor 中“在我键入时做出响应”，而它应该做出反应并说该字段是好的，当我输入一些文本时

CKEDITOR.instances["page_content"].on("instanceReady", function()
        {
                //set keyup event
                this.document.on("keyup", updateTextArea);
                 //and paste event
                this.document.on("paste", updateTextArea);
                
        });

        function updateTextArea()
        {
            CKEDITOR.tools.setTimeout( function()
                    { 
                        $("#page_content").val(CKEDITOR.instances.page_content.getData());
                    }, 0);  
        }

【问题讨论】：

标签： jquery forms validation ckeditor

【解决方案1】：

jquery 验证插件正在对 textarea 或文本字段中的 keyup 事件做出反应，因此您需要在更新 textarea 后触发该事件。

看看这个：

    CKEDITOR.instances["page_content"].on("instanceReady", function()
    {
            //set keyup event
            this.document.on("keyup", updateTextArea);
             //and paste event
            this.document.on("paste", updateTextArea);
            
    });

    function updateTextArea()
    {
        CKEDITOR.tools.setTimeout( function()
                { 
                    $("#page_content").val(CKEDITOR.instances.page_content.getData());
                    $("#page_content").trigger('keyup');
                }, 0);  
    }

【讨论】：

【解决方案2】：

您必须调整 CKEditor textarea 以在它失去焦点时写回 HTML，而不是在提交表单时（我假设这是默认情况下）。

前几天有人提过类似的问题，貌似成功了，check it out。

【讨论】：

我编辑了我的问题，你给我的线程是我需要的，但我无法让它工作。看看我上面编辑过的问题。感谢您的帮助！
我在不同的上下文中处于完全相同的情况（访问 CKEditor 实例以设置其类主体）并且遇到了类似的问题。我问了一个问题，得到的答案似乎可以解决。我还没有时间看它，但也许它对你有帮助：stackoverflow.com/questions/1844569/…
这确实是朝着正确方向迈出的一步，但是我无法单击 keydown 事件来正确触发...我得到了：CKEDITOR.document.on('click', function(event) 但是在我的正常文档正文中单击时触发事件，而不是在 CKEDitor 内？
查看我在评论中链接的问题的评分最高的答案。使用nemisj 的方法，我可以设置CKEDitor 的body 的类。您应该能够以这种方式为其添加侦听器。
我越来越近了：这得到了正确的数据，但 jQuery 验证插件仍然没有响应此代码。 CKEDITOR.instances["page_content"].on("instanceReady", function() { //设置keyup事件 this.document.on("keyup", updateTextArea); //和粘贴事件 this.document.on("paste ", updateTextArea); });函数 updateTextArea() { CKEDITOR.tools.setTimeout( function() { $("#page_content").val(CKEDITOR.instances.page_content.getData()); }, 0); }

【解决方案3】：

不需要做任何事情。

第 1 步：重要提示：在提交之前使用实际内容更新 CKEDITOR textarea

form.on('submit', function () {
        for (var instanceName in CKEDITOR.instances) {
            CKEDITOR.instances[instanceName].updateElement();
        }
    });

下一步：然后在验证您的代码之后（必须是最后一步）

form.validate();

【讨论】：