CodeMirror를 사용할 때 jQuery 유효성 검사 문제

Question

코드 미러와 함께 jQuery 유효성 검사를 사용할 때 이상한 문제가 발생합니다. 유효성 검사는 정상 필드에서 정상적으로 작동하지만 CodeMirror를 사용하여 포맷 된 필드의 유효성 검사 규칙은 무시합니다. CodeMirror 코드가 실행되지 않도록 JS 상단 블록을 주석 처리하면 유효성 검사가 예상대로 작동합니다.

이 내 자바 스크립트 파일입니다

이 조각에

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

, 검증 상단 필드에서 작동하지만 아래 하나

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입니다. 나는 그것들을 교환하는 것을 시도했다, 그것은 확실히 CodeMirror JS가 작동하지 못하게한다.

이

내가 (모든 표준 codemirror 것들)을 포함하고있어 파일입니다 : 나는 JS 파일과 기능의 순서하지만 성공 :(

Answer 1

을 수정하려고했습니다

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

때 CodeMirror textarea을 다시 구성하면 원래의 내용이 숨겨져있는 것 같습니다. jQuery 유효성 검사는 원래의 textarea 요소 (현재 숨겨져있는 요소)의 유효성을 검사하기 때문에 ignore 옵션에 아무것도 무시하지 말 것을 알리는 숨겨진 필드에 대한 유효성 검사가 필요합니다.

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

도 프로그래밍 방식으로 유효성 검사를 트리거하는 처리기를 작성해야하지만 일반적으로 숨겨진 필드에서 유효성 검사를 사용하면 충분합니다.