JQuery + CKEditor validation plugin - text input validation

Question

I use CKEditor in a text box and jQuery validation plugin ( http://bassistance.de/jquery-plugins/jquery-plugin-validation/ )

With the jQuery plugin, you can mark a field as empty or required. When the field, for example. "product name" is empty, the field will be marked as invalid when submitting the form.

But typing "product name", the field will be automatically marked as valid when typing. This is great, but I want to have the same with my CKEditor-enabled text area. Everything works fine with a regular text field (when entering text, the field becomes valid), but this does not work after adding CKEditor to the text field.

From now on, you must click the submit button before CKEditor textarea receives confirmation.

Any ideas on how I can make this work?

Thanks so much for your help, stackoverflow is great help in the last few days!

UPDATE:

I tried the solution from the stream you gave me, but it does not work: Using jQuery to grab content from iframe CKEditor

I have:

CKEDITOR.instances["page_content"].document.on('keydown', function(event)
                {
                    CKEDITOR.tools.setTimeout( function()
                    { 
                        $("#page_content").val(CKEDITOR.instances.page_content.getData()); 
                    }, 0);
        });

but it keeps giving me: "CKEDITOR.instances.page_content.document is undefined"

My text id is "page_content"

This works fine after the button is clicked, but as you can see, I need to somehow trigger the keydown event

$("#btnOk").click(function(event) {
            CKEDITOR.instances.page_content.updateElement(); //works fine
});

UPDATE 2:

, CKEDITOR , , ", " CKEDitor, , ,

CKEDITOR.instances["page_content"].on("instanceReady", function()
        {
                //set keyup event
                this.document.on("keyup", updateTextArea);
                 //and paste event
                this.document.on("paste", updateTextArea);

        });

        function updateTextArea()
        {
            CKEDITOR.tools.setTimeout( function()
                    { 
                        $("#page_content").val(CKEDITOR.instances.page_content.getData());
                    }, 0);  
        }

Answer 1

CKEditor, HTML-, , ( , , ), .

- , , , , .

Answer 2

, : jquery keyup , .

:

    CKEDITOR.instances["page_content"].on("instanceReady", function()
    {
            //set keyup event
            this.document.on("keyup", updateTextArea);
             //and paste event
            this.document.on("paste", updateTextArea);

    });

    function updateTextArea()
    {
        CKEDITOR.tools.setTimeout( function()
                { 
                    $("#page_content").val(CKEDITOR.instances.page_content.getData());
                    $("#page_content").trigger('keyup');
                }, 0);  
    }

Answer 3

No need to do anything.

STEP 1: IMPORTANT: Update the CKEDITOR text area with the actual content before submitting

form.on('submit', function () {
        for (var instanceName in CKEDITOR.instances) {
            CKEDITOR.instances[instanceName].updateElement();
        }
    });

Next STEP: After checking your code (should be the last step)

form.validate();