CODEWITHSUNDEEP
jqueryvalidationckeditor
Jorre
Jorre

Reputation: 17581

using CKEditor with jQuery validation plugin not working

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

Upvotes: 2

Views: 7770

Answers (3)

Jorre
Jorre

Reputation: 17581

I solved it by writing:

CKEDITOR.instances.prod_description.updateElement();

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

Upvotes: 4

Paul Tomblin
Paul Tomblin

Reputation: 182792

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

Upvotes: 1

Scott Harwell
Scott Harwell

Reputation: 7465

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"

Upvotes: 1

Related Questions