CK Editor validates second time

Question

I have two CKEditors in my HTML (I mean to say multiple ckeditors).

Also I am using Validate plugin for checking if CKEditor is empty,if empty show error.

Validation works perfectly, but it validates second time, whereas it should validate first time itself.

I have checked all the questions and answers here, but none helped.

I created a JS Fiddle.

Code for validate :

HTML

<form action="" method="post" id="frmEditor">

    <p>
        <label for="editor1">
            Editor 1:
        </label>
        <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea>
    </p>
    <p>

    </p>

    <p>
        <label for="editor1">
            Editor 2:
        </label>
        <textarea class="ckeditor" cols="80" id="editor2" name="editor2" rows="10"></textarea>
    </p>
    <p>
        <input type="submit" value="Submit">
    </p>

</form>

Script

$(document).ready(function(){   
// validate signup form on keyup and submit
    $("#frmEditor").validate({
        ignore: [],
        debug: false,
        rules: {
            editor1:{
                required: true
            },
            editor2:{
                required: true
            }           
        },
        messages: {         
            editor1: {
                required: "Please enter"
            },
            editor2: {
                required: "Please enter"
            }           
        },
        submitHandler: function(form) {
            form.submit();
        }       
    });
});

Answer 1

You need to update instance before validation performs. So first add an id attribute or class on button like this

<input type="submit" value="Submit" id="submitFormBtn">

Now in your js code write below function

$('#submitFormBtn').click(function () {
    CKEDITOR.instances.editor1.updateElement();
    CKEDITOR.instances.editor2.updateElement();
});

Hope this will work.

Answer 2

jQuery.validator.setDefaults({
    ignore: [],
    // with this no hidden fields will be ignored E.g. ckEditor text-area
});

I observed the validation was working on 2nd submit. The reason is, ckEditor hides the actual text area and puts an iframe as an editor instance, and on submit it pushes the content to the text area. Which means, the validation on the TextArea gets fired on stale data. To fix this problem, I am updating my TextArea on the text change of the editor instance.

    for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].on('change', function ()
        {
            var editorName = $(this)[0].name;
            CKEDITOR.instances[editorName].updateElement();
        });
    }

Answer 3

I tried following solution and it worked .

        <textarea name="txtDesc<?php echo $i;?>" id="txtDesc<?php echo $i;?>" class="ckeditor" rows="5" cols="17" ><?php echo $txtDesc?></textarea>
        <script>
         CKEDITOR.replace("txtDesc<?php echo $i;?>");
         CKEDITOR.add       
            //CKEDITOR.replace('txtDesc0'); 
        </script>   

If there is only 1 ckEditor

for (instance in CKEDITOR.instances) {

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

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

    });
}                                   

If there are more than 1 ckEditor(in my case 2)

CKEDITOR.instances["txtDesc0"].on("instanceReady", function () {
this.document.on("keyup", function () { CKEDITOR.instances["txtDesc0"].updateElement(); });
this.document.on("paste", function () { CKEDITOR.instances["txtDesc0"].updateElement(); });
this.document.on("cut", function () { CKEDITOR.instances["txtDesc0"].updateElement(); });
});

CKEDITOR.instances["txtDesc1"].on("instanceReady", function () {
this.document.on("keyup", function () { CKEDITOR.instances["txtDesc1"].updateElement(); });
this.document.on("paste", function () { CKEDITOR.instances["txtDesc1"].updateElement(); });
this.document.on("cut", function () { CKEDITOR.instances["txtDesc1"].updateElement(); });
});