使用 jQuery Validate 验证 Ace Editor textarea

Question

我正在尝试使用 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>

请协助。

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>

使用 jQuery Validate 验证 Ace Editor textarea

Validating Ace Editor textarea with jQuery Validate

jquery

jquery-validate

ace-editor