我正在尝试使用jQuery validate插件验证ACEeditor 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>
请协助。
答案 0 :(得分:0)
ace中的textarea总是空的,用于读取输入 您需要创建一个假的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>