jQuery Validierung Problem bei der Verwendung von CodeMirror

Question

Ich habe ein seltsames Problem bei der Verwendung von jQuery neben Code-Spiegel validieren. Die Validierung funktioniert problemlos in normalen Feldern, ignoriert jedoch alle Validierungsregeln für Felder, die mit CodeMirror formatiert wurden. Wenn ich den oberen Block von JS auskommentiere, um zu verhindern, dass der CodeMirror-Code ausgelöst wird, funktioniert die Validierung wie erwartet.

Dies ist meine JavaScript-Datei:

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

Das ist mein 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> 

Auf diesem Schnipsel, die Validierung arbeitet auf dem oberen Bereich, aber nicht der Boden ein. Ich habe versucht, sie zu tauschen, es ist definitiv der CodeMirror JS, der verhindert, dass es funktioniert.

Dies sind die Dateien, die ich bin auch (alle Standard-Codemirror sind):

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

Ich habe versucht, die Reihenfolge der JS-Dateien und Funktionen zu modifizieren, aber kein Erfolg :(

Answer 1

Wenn Codemirror rekonfiguriert die textarea, es versteckt wahrscheinlich das Original aus Sicht.Da jQuery Validate nur das ursprüngliche Element textarea validiert, das jetzt ausgeblendet ist, müssen Sie die Überprüfung auf versteckte Felder aktivieren, indem Sie der ignore Option sagen, nichts zu ignorieren.

Sie möglicherweise müssen auch einen Handler schreiben, der die Validierung programmgesteuert auslöst, aber in der Regel die Aktivierung der Validierung auf dem versteckten Feld ist genug.