使用 jQuery Validate 验证 Ace Editor 文本区域答案

【问题标题】：Validating Ace Editor textarea with jQuery Validate使用 jQuery Validate 验证 Ace Editor 文本区域
【发布时间】：2018-02-11 18:31:50
【问题描述】：

我正在尝试使用 jQuery 验证插件验证 ACEeditor 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>

请帮忙。

【问题讨论】：

我在您展示的最少量的 HTML 标记中看不到 textarea。

标签： jquery jquery-validate ace-editor

【解决方案1】：

ace 中的 textarea 始终为空，用于读取输入。
您需要创建一个假文本区域，并在其上定义自定义值获取器。

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

【讨论】：