CODEWITHSUNDEEP
javascriptjqueryjquery-validatecodemirror
pronoob
pronoob

Reputation: 831

jQuery validate issue when using CodeMirror

I'm experiencing a strange issue when using jQuery validate alongside code mirror. The validation works fine on normal fields, but it ignores any validation rules on fields that are formatted using CodeMirror. If I comment out the top block of JS to prevent the CodeMirror code from firing, the validation works as expected.

This is my JavaScript file:

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
      }
    }
  });
});

This is my 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>

On this snippet, the validation works on the top field, but not the bottom one. I've tried swapping them round, it is definitely the CodeMirror JS that is preventing it from working.

These are the files I'm including (all standard codemirror ones):

= 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'

I've tried modifying the order of the JS files and functions but no success :(

Upvotes: 0

Views: 698

Answers (1)

Sparky
Sparky

Reputation: 98738

When CodeMirror reconfigures the textarea, it's probably hiding the original from view. Since jQuery Validate is only validating the original textarea element, which is now hidden, you'll need to enable validation on hidden fields by telling the ignore option to ignore nothing.

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

You might also have to write a handler that programmatically triggers validation, but usually enabling validation on the hidden field is enough.

Upvotes: 1

Related Questions