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
– Jorre, Commented Dec 14, 2009 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
– Jorre, Commented Dec 14, 2009 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
– Jorre, Commented Dec 14, 2009 at 21:52

Zoe - Save the data dump · Accepted Answer · 2021-09-03 08:31:18Z

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 3, 2021 at 8:31

Zoe - Save the data dump

28.4k22 gold badges130 silver badges163 bronze badges

answered Dec 14, 2009 at 22:03

Jorre

17.6k34 gold badges103 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Scott Harwell · Accepted Answer · 2011-03-03 16:08:12Z

1

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"

answered Mar 3, 2011 at 16:08

Scott Harwell

7,4652 gold badges31 silver badges41 bronze badges

Comments

Paul Tomblin · Accepted Answer · 2011-07-15 21:39:26Z

1

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

answered Jul 15, 2011 at 21:39

Paul Tomblin

184k59 gold badges324 silver badges412 bronze badges

Collectives™ on Stack Overflow

using CKEditor with jQuery validation plugin not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related