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上还得多下些功夫，水平实在是不怎么样啊。

评论

2 楼 yangzhihuan 2010-07-27  

错误信息的显示我是让它默认的，我的页面没有出现变形的情况，所以并未深究这一步是如何工作的。

估计要看源代码，然后修改Validate默认的行为了。

1 楼 supercwg 2010-07-26  

使用jQuery Validate作验证的时候，没有遇到当显示错误信息时，本身排好版面的页面就变形了，除非要预留显示错误信息的足够空间。请问您是如何解决的呢？