jQuery Validate验证框架 + CKEditor 无法验证问题的解决方法

阅读更多

最近项目的前端使用了jQuery，表单的前端验证用的是jQuery Validate，用起来很简单方便，一直都很满意的。

前段时间，根据需求为表单中的 textarea 类型的元素加上了html富文本编辑器，用的是CKEditor，功能强大，定制方便，也很满意。

不过用CKEditor增强过的 textarea 元素，这个字段要求是非空的，在jQuery Validate总是验证不通过，原因就是在 CKEditor 编辑器填写了内容之后，编辑器并不是立即把内容更新到原来的 textarea 元素中的，我没仔细看源代码，试过一种情况就是每一次提交不通过，第二次提交就可以通过的，貌似编辑器是在 submit 事件之前把编辑器的内容更新到 textarea 中的（这个是猜测，不知道对不对，我对jQuery 和 CKEditor 都不太熟悉，算是拿来就用，有问题就放狗的那种）。

于是在网上找到了解决问题的代码，代码不是我写的，我只是记录一下我遇到的问题，代码非原创。原理就是当编辑器更新了内容之后，立即把内容更新到 textarea 元素。

原文链接 http://stackoverflow.com/questions/1908592/jquery-validation-plugin-ckeditor-validate-when-typing

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);  
        }

目前一切使用正常，算是解决了一个让我头痛的问题，由此也可以看到，我在Javascript上还得多下些功夫，水平实在是不怎么样啊。