jQuery validate表单校验时CKEditor字段校验不生效求助

CKEditor初始化时会自动隐藏你写的原生<textarea>元素，而jQuery Validate 默认配置会直接跳过所有隐藏表单元素的校验，自然不会触发editor1字段的校验规则。另外你的代码里还有3处不规范的写法会影响校验逻辑：

• title输入框未设置name属性，jQuery Validate是通过元素的name属性匹配校验规则的，当前这个字段的必填校验是靠原生HTML的required属性触发，不受插件规则控制
• editor1对应的textarea写了两个重复的name="editor1"属性，属于不规范HTML写法，可能在部分浏览器下出现属性识别异常
• 校验配置里没有调整默认的ignore参数，也没有做CKEditor和原生textarea的值同步，编辑器里输入的内容不会实时更新到隐藏的textarea上，就算触发校验也拿不到最新值

第一步：修正表单HTML代码 #

删掉重复属性，给title补name属性：

<form name="addblog" id="addblog" method="POST">
  <input type="text" class="form-control" name="title" required>
  <input class="form-control" type="file" id="file" name="file" required>
  <textarea class="ckeditor" name="editor1" id="editor1" required></textarea>
</form>

第二步：调整校验初始化配置 #

把ignore参数设为空数组，取消插件对隐藏元素的默认忽略，同时补上缺失的规则和提示，适配CKEditor的错误提示位置：

$().ready(function() {
  $("#addblog").validate({
    // 核心配置：不忽略任何隐藏元素，保证隐藏的textarea能被校验
    ignore: [],
    rules: {
      title: { required: true },
      file: { required: true },
      editor1: { required: true }
    },
    messages: {
      title: { required: "请输入文章标题" },
      file: { required: "请上传文章封面图" },
      editor1: { required: "请输入文章正文内容" }
    },
    // 调整错误提示位置，避免提示插到隐藏textarea后面看不到
    errorPlacement: function(error, element) {
      if (element.attr("name") === "editor1") {
        error.insertAfter(element.siblings(".cke"));
      } else {
        error.insertAfter(element);
      }
    }
  });

  // 监听CKEditor内容变化，实时同步值到原生textarea并触发校验
  if (window.CKEDITOR) {
    CKEDITOR.on("instanceReady", function(ev) {
      const editor = ev.editor;
      editor.on("change", function() {
        this.updateElement(); // 将编辑器内容同步到关联的原生textarea
        $(this.element).valid(); // 实时触发当前字段校验
      });
    });
  }
});

注：以上事件适配CKEditor4版本，如果使用CKEditor5，只需要把编辑器内容变更的监听换成对应版本的事件写法即可，核心逻辑不变：一是让jQuery Validate不跳过隐藏的textarea，二是保证编辑器内容实时同步到原生textarea供插件读取校验。

内容的提问来源于stack exchange，提问作者amit