using CKEditor with jQuery validation plugin not working

Question

I'm using CKeditor and the jQuery validation plugin from basistance. My textarea (with the CKEditor on it) is being validated by jQuery, but that only works after the second click on my submit button.

In short: the first time I submit the form when data is entered in the CKEditor, it says "field is empty". The second time it says it's ok and the form is being submitted.

I read a solution for this:

"you could work around this problem by calling CKEDITOR.editor::updateElement right before every validation routine."

I cannot find how to implement it though:

$(document).ready(function(){
    CKEDITOR.replace( 'prod_description',
    {
        toolbar: 'MyToolbar'
    }
    );

    $("#btnOk").click(function(){
        CKEDITOR.instances.editor1.updateElement();
        alert('click');
    });
});

This always gives me the error: "CKEDITOR.instances.editor1 is undefined"

Any ideas on how to solve this. Documentation from CKEditor is here: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#updateElement

Answer 1

thanks czarchaic,

I solved it by writing:

CKEDITOR.instances.prod_description.updateElement();

where "prod_description" is the name of your textare with CKeditor linked to it.

Answer 2

This may not be the best way to do it, but I created a jquery rule that simply checks to see if there is data in the CKEditor. If there is data, then it passes the rule. If not, then it fails. This seems to work for me pretty well.

//Have to build custom method to check ckeditor
jQuery.validator.addMethod("ckeditor", function(value, element) { 
    var textData = editor.getData();
    if(textData.length>0) return true;
    return false;
}, "No data in editor");

Then, my rule looks like this:

'fieldName': "ckeditor"

Answer 3

I have multiple CKEDITORS on my page, so I do this:

        // You need to update the editors before jqValidator.
        for (var i in CKEDITOR.instances)
        {
            CKEDITOR.instances[i].updateElement();
        }
        if (!jqValidator.form())
        {
            alert('Error Alert: please correct the errors detailed below, then click "Apply changes" again.');
            return;
        }