CKEditor无法验证的解决方案(js验证+jQuery Validate验证)_jquery
前段时间,根据需求为表单中的 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无法验证的两种方案,相信大家和小编一样都有所收获,谢谢大家的阅读。
推荐阅读
-
jQuery Validate 无法验证 chosen-select元素的解决方法
-
使用jquery.validate自定义方法教程实现手机号码或者固话至少填写一个的逻辑验证
-
jquery结合CSS使用validate实现漂亮的验证
-
jQuery Validate 验证,校验规则写在控件中的具体实例
-
基于jQuery.Validate验证库知识点的详解
-
JS+jQuery实现注册信息的验证功能
-
jQuery Validate插件自定义验证规则的方法
-
jQuery.validate.js表单验证插件的使用代码详解
-
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
-
jQuery.validate.js表单验证插件