jQuery 使用 CodeMirror 时验证问题

Question

我在使用 jQuery 验证代码镜像时遇到了一个奇怪的问题。验证在普通字段上工作正常，但它会忽略使用 CodeMirror 格式化的字段的任何验证规则。如果我注释掉 JS 的顶部块以防止触发 CodeMirror 代码，验证将按预期工作。

这是我的 JavaScript 文件：

var editor = CodeMirror.fromTextArea(document.getElementById("instance_body"), {
  lineNumbers: true,
  matchBrackets: true,
  styleActiveLine: true,
  mode:  "application/ld+json"
});

$(document).ready(function(){
  $("#edit_instance_form").validate({
    rules: {
      "instance[url_list]": {
        required: true
      },
      "instance[body]": {
        required: true
      }
    }
  });
});

这是我的 html:

<form class="form-horizontal" name="some-form" id="edit_instance_form" action="/thing/RydgI9qZVTQ33CfyITtfBA" accept-charset="UTF-8" method="post">
  <input name="utf8" type="hidden" value="&#x2713;" />
  <input type="hidden" name="_method" value="patch" />
  <input type="hidden" name="authenticity_token" value="sometoken" />
  <link rel="stylesheet" media="screen" href="/assets/codemirror/codemirror-7d548963711359c4638ec787ca590abde8886ec3ebb9983230193ff8bcef3824.css" />
  <div class='form-group'>
    <label class='col-sm-2 control-label'>URL(s)</label>
    <div class='col-sm-10'>
      <textarea name="instance[url_list]" id="instance_url_list" class="form-control"></textarea>
    </div>
  </div>
  <div class='form-group'>
    <label class='col-sm-2 control-label'>Create Body</label>
    <div class='col-sm-10'>
      <textarea name="instance[body]" id="instance_body"></textarea>
    </div>
  </div>
  <div class='form-group'>
    <div class='col-sm-4 col-sm-offset-2'>
      <a class="btn btn-white action-btn" href="/things">Cancel
              </a>
      <input type="submit" name="commit" value="Save" class="btn btn-primary action-btn" data-disable-with="Save" />
    </div>
  </div>
</form>

在此代码段中，验证适用于顶部字段，但不适用于底部字段。我试过将它们交换，绝对是 CodeMirror JS 阻止了它工作。

这些是我包含的文件（所有标准代码镜像文件）：

= javascript_include_tag 'validate/jquery.validate.min.js'
= javascript_include_tag 'codemirror/codemirror.js'
= javascript_include_tag 'codemirror/mode/javascript/javascript.js'
= javascript_include_tag 'codemirror/addon/selection/active-line.js'
= javascript_include_tag 'codemirror/addon/edit/match-brackets.js'
= javascript_include_tag 'the-above-file.min.js'

我尝试修改 JS 文件和函数的顺序但没有成功:(

Answer 1

当 CodeMirror 重新配置 textarea 时，它可能隐藏了原始文件。由于 jQuery Validate 仅验证现在隐藏的原始 textarea 元素，您需要通过告诉 ignore 选项忽略任何内容来启用对隐藏字段的验证。

$(document).ready(function(){
    $("#edit_instance_form").validate({
        ignore: [], // enable validation on hidden fields
        rules: { ...

您可能还必须编写一个以编程方式触发验证的处理程序，但通常在隐藏字段上启用验证就足够了。

jQuery 使用 CodeMirror 时验证问题

jQuery validate issue when using CodeMirror

javascript

jquery

jquery-validate

codemirror