与 ckeditor 集成的文本区域的 jquery 验证

Question

我有一个

<td><textarea id="event-body" name="body">
<p class="error"></p>

与 CKEDITOR 集成的

CKEDITOR.replace("event-body")

text-area和 jquery validate 插件。代码是这样的

$('#event').validate({
    rules:{
        name:{
            required: true
        },  
    },
    messages:{
        body:{
            required: "event body is required"
        }
    },
    errorPlacement: function(error, element){
        $(element).each(function (){
            $(this).parent('td').find('p.error').html(error);
        })
    });

代码工作得很好，但是当我输入我的 textarea 元素时，我仍然收到错误消息，直到我单击它两次。即我必须提交页面两次，这样即使 textarea 不为空也不会出现错误消息。

有没有办法顺利验证它（无需单击两次）。

Answer 1

看看这里

基本上你需要

CKEDITOR.instances.editor1.updateElement();

在运行验证之前调用。

只需将 editor1 替换为您的文本区域的名称即可。

然后致电

$(myformelement).validate();

编辑

$("#my-form-submit-button").click(function(e){
     e.preventDefault();
     CKEDITOR.instances.event-body.updateElement();
     $('#event').validate({
          ...options as above..
     });o
})

Answer 2

将其放入提交按钮 mousedown() 事件中：

$("#submit").mousedown(function(){
  for (var i in CKEDITOR.instances){
    CKEDITOR.instances[i].updateElement();
  }
});

Answer 3

jQuery 验证器仅验证可见的输入字段，但 CKEDITOR 使文本区域隐藏以防止其被验证。

Answer 4

我结合了你们的建议，制作了这个没有问题的小作弊程序。

我的代码：

<form id="create-message-form-3" class="form-horizontal" role="form" accept-charset="utf-8">
                <div class="title"><h1>Add Content:</h1></div>
                <div class="col col-12">
                  <textarea class="form-control ckeditor" name="templateeditor" id="templateeditor" rows="6"></textarea>
                  <p class="error"></p>
                </div>



                <div class="text-center">
                    <a class="btn btn-success pull-left" href="create-message-2.php">Back</a>
                    <input class="btn btn-default" type="button" value="Save">
                    <input id="submit-templateeditor" class="btn btn-success pull-right" type="submit" value="Next Step">
                </div>
             </form>

在我的 .css 文件上，我强迫我的代码如下：

textarea.ckeditor {
visibility: visible !important;
display: block !important;
height: 0px !important;
border: none !important;
resize:none;
overflow: hidden; }

我的 .js 验证是正常格式：

    $("#submit-templateeditor").click(function(){
     CKEDITOR.instances.templateeditor.updateElement();
     $("#create-message-form-3").validate({
        rules: {
            templateeditor: "required"
        },
        messages: {
            templateeditor: "Please add some code before continue"
        },
        errorPlacement: function(error, element){
            $(element).each(function (){
                $(this).parent('div').find('p.error').html(error);
            });
        }
    });
});

Answer 5

在验证表单的 JavaScript 中使用它。它将更新您的 ckeditor 并将 ckeditor 的值分配给您将其集成到的文本区域。

它应该在提交表单之前运行：

CKEDITOR.instances.editor1.updateElement();

Answer 6

如果您像这样附加它

$("#Detail").ckeditor(config);

，那么您将需要使用类似的东西，

var editor = $('#Detail').ckeditorGet();
editor.updateElement();

在这种情况下我使用这个示例函数来提交我的表单

function SubmitEvent(){
    var editor = $('#Detail').ckeditorGet();
    editor.updateElement();
    if($("#EventForm").valid()) {
        $('#EventForm').submit();
    }
}

Answer 7

我更愿意更新模糊事件的每个实例，因此您不需要更改提交功能上的任何内容！ :)

$('#myInstance').ckeditor({toolbar:'MyToolbar'});
CKEDITOR.instances.myInstance.on('blur', function( e ){
    CKEDITOR.instances.myInstance.updateElement();
});

Answer 8

jQuery .validate() 函数提供“onsubmit”选项来在验证之前执行自定义操作。
默认情况下它设置为 true。
我已经在我的项目中使用了它并且效果非常好。

        $(".selector").validate({
          onsubmit: function(){
                    CKEditorUpdate();
                    return true;
                },
                rules:{
                    title:{required:true},
                    content:{required:true}
                },
                messages:{
                    title:{required:"Please enter a title"},
                    content:{required:"Please enter some content"}
                },
                submitHandler : function(form){
        });

    function CKEditorUpdate() {
        for (instance in CKEDITOR.instances)
            CKEDITOR.instances[instance].updateElement();
    }

这是一种更干净、更容易理解的方法。
请参阅http://jqueryvalidation.org/validate#onsubmit

Answer 9

如果你使用 SPRY，这对我有用......

<script>
$(document).ready(function () {

    CKEDITOR.instances["editor1"].on("instanceReady", function () {

        //set keyup event
        this.document.on("keyup", function () { CKEDITOR.instances["editor1"].updateElement(); });
        //and paste event
        this.document.on("paste", function () { CKEDITOR.instances["editor1"].updateElement(); });
        //and cut event
        this.document.on("cut", function () { CKEDITOR.instances["editor1"].updateElement(); });

    });

    CKEDITOR.instances["editor2"].on("instanceReady", function () {

        //set keyup event
        this.document.on("keyup", function () { CKEDITOR.instances["editor2"].updateElement(); });
        //and paste event
        this.document.on("paste", function () { CKEDITOR.instances["editor2"].updateElement(); });
        //and cut event
        this.document.on("cut", function () { CKEDITOR.instances["editor2"].updateElement(); });

    });

    CKEDITOR.instances["editor3"].on("instanceReady", function () {

        //set keyup event
        this.document.on("keyup", function () { CKEDITOR.instances["editor3"].updateElement(); });
        //and paste event
        this.document.on("paste", function () { CKEDITOR.instances["editor3"].updateElement(); });
        //and cut event
        this.document.on("cut", function () { CKEDITOR.instances["editor3"].updateElement(); });

    });

});
</script>