Jquery validation not working with ckeditor

Finally i found the answer to my question...

I changed the value of ignore property which by default holds :hidden value. as CKEDITOR hides the textarea jQuery validation doesn't validate the element:

   ignore: []  

Just i changed the validation script as follows..

     $(document).ready(function(){

            $("#f3").validate(
            {
                ignore: [],
              debug: false,
                rules: { 

                    cktext:{
                         required: function() 
                        {
                         CKEDITOR.instances.cktext.updateElement();
                        },

                         minlength:10
                    }
                },
                messages:
                    {

                    cktext:{
                        required:"Please enter Text",
                        minlength:"Please enter 10 characters"


                    }
                }
            });
        });

HTML snippet is

   <form class="form-horizontal" role="form" name="f3" id="f3" >
     <div class="col-xs-8">
        <textarea class="ckeditor" name="cktext" id="cktext"></textarea>
    </div>
     <button type="submit" class="btn btn-default btn-success">Submit</button>
   </form>

As i found this answer in Here

Thanks to all...


I took the previous answer and fleshed it out with an actual CKEditor, so that you can see what needs to be done to copy the contents of the CKEditor into your textarea before submit.

The key bits are this:

CKEDITOR.on('instanceReady', function () {
    $.each(CKEDITOR.instances, function (instance) {
        CKEDITOR.instances[instance].document.on("keyup", CK_jQ);
        CKEDITOR.instances[instance].document.on("paste", CK_jQ);
        CKEDITOR.instances[instance].document.on("keypress", CK_jQ);
        CKEDITOR.instances[instance].document.on("blur", CK_jQ);
        CKEDITOR.instances[instance].document.on("change", CK_jQ);
    });
});

function CK_jQ() {
    for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
    }
}

Which I got from this answer to a different but similar question.

The other error you have is misspelling minlength in your rules object.

This is what it looks like working: http://jsfiddle.net/ryleyb/QcJ57/