jQuery validation plugin + CKEditor - validate when typing

Question

Hi!

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?

Thanks a lot for your help, stackoverflow has been a great help the last few days!

UPDATE:

I tried the solution from the thread you gave me but it doesn't work: http://stackoverflow.com/questions/924145/using-jquery-to-grab-the-content-from-ckeditors-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);  
     }

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

Answer 2

Ok everybody, I have fixed it thanks to your tips: 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);  
 }

Answer 3

Thanks for sharing Jorre. Solved my exact problem.