最近项目的前端使用了jquery，表单的前端验证用的是jquery validate，用起来很简单方便，一直都很满意的。
前段时间，根据需求为表单中的 textarea 类型的元素加上了html富文本编辑器，用的是ckeditor，功能强大，定制方便，也很满意。
不过用ckeditor增强过的 textarea 元素，这个字段要求是非空的，在jquery validate总是验证不通过，原因就是在 ckeditor 编辑器填写了内容之后，编辑器并不是立即把内容更新到原来的 textarea 元素中的，我没仔细看源代码，试过一种情况就是每一次提交不通过，第二次提交就可以通过的，貌似编辑器是在 submit 事件之前把编辑器的内容更新到 textarea 中的（这个是猜测，不知道对不对，我对jquery 和 ckeditor 都不太熟悉，算是拿来就用，有问题就放狗的那种）。
于是在网上找到了解决问题的代码，代码不是我写的，我只是记录一下我遇到的问题，代码非原创。原理就是当编辑器更新了内容之后，立即把内容更新到 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); }
目前一切使用正常，算是解决了一个让我头痛的问题。
另一种解决思路：
ckeditor 编辑器是增强过的 textarea 元素,在填写了内容之后，编辑器并不立即把内容更新到原来的 textarea 元素中的,而是等到 submit 事件之前把编辑器的内容更新到 textarea 中.
因此,普通的js验证或是jquery validate验证都获取不到编辑器的值.)
1.js验证
获取ckeditor 编辑器的值其实很容易,其值就是ckeditor.instances.mckeditor.getdata(),实例代码如下:

其中,mckeditor为编辑器的textarea的id和name.
asp.net中也是一样:
复制代码 代码如下:
2.jquery validate验证
jquery的验证模式不能直接使用ckeditor.instances.mckeditor.getdata()这个值.
它是使用如下形式来提交验证:
function initrules() { opts = { rules: { tbtopicheading:{ required:true, maxlength:50 }, mckeditor:{ required:true, maxlength:4000 } }, messages: { tbtopicheading:{ required:请输入发表话题的标题., maxlength:jquery.format(话题的主题长度必须在50字符以内.) }, mckeditor:{ required:请填写话题内容., maxlength:jquery.format(话题内容的长度必须在4000字符以内.) } } } }
其中mckeditor为控件id,不仅有取值的作用,还有提示信息定位的作用.
因此,可以在页面加载时,加入实例化编辑器代码,实现编辑器更新了内容之后，立即把内容更新到 textarea 元素。
代码如下：

此段代码放在编辑器控件之下即可.完整实例如下:

以上就是解决ckeditor无法验证的两种方案，相信大家和小编一样都有所收获，谢谢大家的阅读。