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

is that java? I'm using Javascript and Jquery in an html-page — Jorre, Dec 14 '09 at 21:12
Yes I'm using firebug. console.dir(CKEDITOR.intances); -> prints nothing in the console, but CKEditor is showing up just fine... — Jorre, Dec 14 '09 at 21:46
I'm getting close thanks to you czarchaic! CKEDITOR.instances.prod_description.updateElement(); That's what I need, all I need right now is a good place to call this update. It should be a pre-validate location in my code, right before the jquery validation plugin kick in. Any ideas on that one? — Jorre, Dec 14 '09 at 21:52

score 4 · Accepted Answer · edited Sep 03 '21 at 08:31

4

I solved it by writing:

CKEDITOR.instances.prod_description.updateElement();

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

edited Sep 03 '21 at 08:31

Zoe

27,060
21
118
148

answered Dec 14 '09 at 22:03

Jorre

17,273
32
100
145

score 1 · Answer 2 · answered Mar 03 '11 at 16:08

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"

score 1 · Answer 3 · answered Jul 15 '11 at 21:39

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

using CKEditor with jQuery validation plugin not working

3 Answers3

Linked