jQuery Validate验证框架 + CKEditor 无法验证问题的解决方法_ckeditor textarea在用valiform验证时提示无内容-优快云博客

本文链接：https://blog.youkuaiyun.com/hi_kevin/article/details/7287091

本文介绍如何解决使用CKEditor富文本编辑器时遇到的jQuery Validate插件无法正确验证内容的问题。通过在表单提交前手动触发CKEditor的内容同步更新，确保验证逻辑正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在jQuery Validate总是验证不通过，原因就是在 CKEditor 编辑器填写了内容之后，编辑器并不是立即把内容更新到原来的 textarea 元素中的

可以在提交表单之前进行如下修改

CKEDITOR.instances.content.updateElement();

html标签为：

完整html代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="${contextPath}/scripts/validate/jquery.validate.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="${contextPath}/scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" src="${contextPath}/scripts/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${contextPath}/scripts/validate/jquery.validate.js"></script>
<script>
var valdater;
jQuery(document).ready(function(){
valdater=jQuery("#form").validate({
  errorPlacement: function(error, element) {
        error.appendTo( element.siblings("span"));
    },
  meta:"validate",
  rules:{
        content:{
    required: true
            }
  },
    messages:{
      content:{required:'<s:text name="label.input.message_cn_content" />'}         }
   });
});
function doSubmit(){
CKEDITOR.instances.content.updateElement();
if(valdater.form()){
  document.notice_form.submit();
  return true;
}
return false;
}
</script>
</head>
<body id="fbody">

</form>
</body>
</html>