使用JQuery Validate验证ACE编辑器Textarea

Question

我正在尝试使用jQuery validate插件来验证Acceeditor Textarea，但到目前为止没有运气。我了解的是默认情况下隐藏了编辑器的Textarea，因此我必须为隐藏的输入应用规则，以下是我的代码；到目前为止我尝试过的。

<div class="usage-container">
    <div id="html-code" class="input-control code-editor"></div>
 </div>
<script>
var htmleditor = ace.edit("html-code");
htmleditor.setTheme("ace/theme/tomorrow");
htmleditor.getSession().setMode("ace/mode/scss");
htmleditor.setFontSize("16px");
htmleditor.setDisplayIndentGuides(true);
htmleditor.setShowPrintMargin(false);
        jQuery("form[name='new_form']").validate({
        ignore: [],
        errorClass: "has-error",
        validClass: "has-noerror",
        highlight: function(element) { 
        jQuery(element).closest('.input-control').removeClass('has-success').addClass('has-error');
        },
        unhighlight: function(element) { 
        jQuery(element).closest('.input-control').removeClass('has-error').addClass('has-success');
        },

        rules: {
        htmleditor : {
        required: true
            }
          }
         ..........
        )}
</script>

请协助。

Answer 1

ACE中的Textarea总是空的，用于阅读输入。
您需要创建一个伪造的文本方面，并在其上定义自定义值getter。

<script src=https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js></script>
<script src=https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js></script>
<form name='new_form'>
    <div class="usage-container">
        <textarea style="display:none" id="htmleditor" name="htmleditor"></textarea>
        <div id="html-code" class="input-control code-editor"></div>
    </div>
</form>
<script>
    var validator = jQuery("form[name='new_form']").validate({
        ignore: [],
        errorClass: "has-error",
        validClass: "has-noerror",
        highlight: function(element) { 
            jQuery(element).closest('.input-control')
                .removeClass('has-success').addClass('has-error');
        },
        unhighlight: function(element) { 
            jQuery(element).closest('.input-control')
                .removeClass('has-error').addClass('has-success');
        },
        rules: {
            htmleditor : {
                required: true
            }
        }
    })
    
    var htmleditor = ace.edit("html-code", {
        theme: "ace/theme/tomorrow",
        mode: "ace/mode/scss",
        fontSize: 16,
        displayIndentGuides: true,
        showPrintMargin: false,
        maxLines: 10,
        minLines: 4,
    });
    
    htmleditor.on("input", function() { 
        validator.element(fakeTextarea)
    });
    htmleditor.on("blur", function() {
        validator.element(fakeTextarea);
    });
    var fakeTextarea = document.getElementById("htmleditor");
    fakeTextarea.__defineGetter__("value", function() { 
        return htmleditor.getValue();
    })
</script>