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