论坛首页 Web前端技术论坛

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

浏览 4614 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-07-20  
最近项目的前端使用了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上还得多下些功夫,水平实在是不怎么样啊。

   发表时间:2010-07-26  
使用jQuery Validate作验证的时候,没有遇到当显示错误信息时,本身排好版面的页面就变形了,除非要预留显示错误信息的足够空间。请问您是如何解决的呢?
0 请登录后投票
   发表时间:2010-07-27  
错误信息的显示我是让它默认的,我的页面没有出现变形的情况,所以并未深究这一步是如何工作的。

估计要看源代码,然后修改Validate默认的行为了。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics