jQuery validation plugin + CKEditor - validate when typing

Question

I'm using CKEditor on a textarea and the jQuery validation plugin (http://bassistance.de/jquery-plugins/jquery-plugin-validation/)

With the jQuery plugin it's possible to mark a field as empty or required. When a field e.g. "product name" is empty the field will be marked as invalid when submitting the form.

But, while typing in a "product name", the field will be automatically marked as valid while typing. That's great, but I want to have the same with my CKEditor-enabled textarea. Everything works great with a plain textarea (when typing text, the field becomes valid), but this doesn't work anymore after adding CKEditor to the textarea.

From then on, you have to click the submit button before the CKEditor textarea gets re-validated.

Any ideas on how I can make this work?

UPDATE:

I tried the solution from the thread you gave me but it doesn't work: Using jQuery to grab the content from CKEditor's iframe

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 that keeps giving me: "CKEDITOR.instances.page_content.document is undefined"

The id of my textare is "page_content"

This works fine after clicking on the button, but as you see I need to trigger the keydown event somehow

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

UPDATE 2:

This code is correct and it gets the data from CKEDITOR into my textarea, but still, nothing is happening with my validation plugin, it's not "responding as I type" in the CKEDitor while it should react and say that the field is OK when I type in some text

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);  
        }

Solution 1

You would have to tweak the CKEditor textarea to write back the HTML when it loses focus, instead of (I assume this is what it does by default) when the form is submitted.

Somebody had a similar question a few days ago and seems to have been successful, check it out.

Solution 2

The jquery validation plugin is reacting to the keyup event in the textarea or text fields, so you need to trigger that event after updating your textarea.

Check this out:

    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);  
    }

Solution 3

No need to do anything.

1st STEP: IMPORTANT: update CKEDITOR textarea with actual content before submit

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

Next STEP: Then after validate your code (Must be last step)

form.validate();