使用jQuery Validate验证Ace Editor文本框失败，求解决方案

算力阿峰

2026-5-19

我之前也碰到过这个问题，Ace Editor的隐藏原生textarea确实会让jQuery Validate默认跳过验证，下面是我亲测有效的解决方案：

核心问题拆解

jQuery Validate默认会忽略所有:hidden元素的验证，而Ace Editor正是通过隐藏原生textarea来实现富编辑功能的，所以我们需要做两件关键的事：让Validate不忽略这个特定的隐藏textarea，以及实时同步编辑器内容到textarea，这样验证才能拿到正确的输入值。

具体实现步骤

1. 给隐藏textarea标记专属类

先给Ace绑定的原生textarea加一个自定义类，方便我们精准控制Validate的忽略规则：

<!-- 你的Ace容器 -->
<div id="editor-container" style="height: 200px;"></div>
<!-- 隐藏的原生textarea，添加专属类 -->
<textarea name="editor-content" id="editor-textarea" class="ace-editor-hidden" style="display: none;"></textarea>

2. 配置jQuery Validate，取消对该textarea的忽略

修改Validate的ignore选项，让它跳过除了.ace-editor-hidden类之外的隐藏元素：

$("#your-form-id").validate({
  // 关键：不忽略带ace-editor-hidden类的隐藏元素
  ignore: ":hidden:not(.ace-editor-hidden)",
  // 其他基础配置...
});

3. 实时同步Ace编辑器内容到textarea

用户的输入是在Ace编辑器里，所以必须把编辑器内容同步到隐藏的textarea，这样Validate才能拿到最新值：

// 初始化Ace编辑器
const editor = ace.edit("editor-container");
editor.setTheme("ace/theme/monokai"); // 可选：设置主题
editor.getSession().setMode("ace/mode/javascript"); // 可选：设置语言模式

// 获取对应的隐藏textarea
const textarea = $("#editor-textarea");

// 编辑器内容变化时同步到textarea
editor.getSession().on("change", function() {
  textarea.val(editor.getValue());
  // 可选：如果需要实时触发验证，可调用下面的方法
  // textarea.valid();
});

// 页面加载时同步一次初始值（如果编辑器有默认内容）
textarea.val(editor.getValue());

4. 设置验证规则并自定义错误提示位置

因为textarea是隐藏的，默认的错误提示会出现在隐藏元素旁边，用户看不到，所以需要指定错误提示的位置：

$("#your-form-id").validate({
  ignore: ":hidden:not(.ace-editor-hidden)",
  rules: {
    "editor-content": { // 对应textarea的name属性
      required: true,
      minlength: 15 // 示例：要求最少15个字符
    }
  },
  messages: {
    "editor-content": {
      required: "请输入编辑器内容",
      minlength: "内容长度不能少于15个字符"
    }
  },
  // 自定义错误提示位置：放到Ace编辑器容器下方
  errorPlacement: function(error, element) {
    if (element.hasClass("ace-editor-hidden")) {
      error.insertAfter("#editor-container");
    } else {
      error.insertAfter(element);
    }
  }
});

5. 表单提交时最后同步一次（可选但稳妥）

为了避免最后一次输入没同步到textarea，在表单提交前再做一次同步：

$("#your-form-id").submit(function() {
  textarea.val(editor.getValue());
  return $(this).valid();
});

关键点总结

必须通过ignore选项让Validate不忽略Ace对应的隐藏textarea
实时同步编辑器内容到textarea是验证生效的核心
自定义错误提示位置，确保用户能看到验证反馈

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