Update textarea with CKEditor + jQuery Validation

Question

I'm trying to validate a form which contains a textarea supported by CKEditor. But now, it simply doesn't show any errors at all, and doesn't submit the code.

I've read all the answers I could related to this topic but I couldn't get my code working.

This is what I've got so far:

if(jQuery().validate) {
    $("#submit_button").click(function(e){
        e.preventDefault();
        CKEDITOR.instances.editor1.updateElement();

        $(" #content_form ").validate({
            ignore: "input:hidden:not(input:hidden.required),input:hidden:not(input:hidden.editor1)",
            errorPlacement: function(error, element) {
                if (element.attr("name") == "editor1")
                {
                    error.insertBefore("#editor1");
                }
                else
                {
                    error.insertAfter(element);
                }
            },
            rules: {
                title: {
                    required: true,
                    minlength: 5
                },
                editor1: {
                    required: true,
                    minlength: 10
                },
                imglink: {
                    url:true
                },
            },
            messages: {
                title: "The title field is required.",
                editor1: "The content field is required.",
                imglink: "You must provide a valid URL."
            }
        });
    });
}

I would be very grateful if any of you could help figure this out.

Thanks in advance.

Answer 1

The way I am doing is like this:

CKEDITOR.instances['txtSomeTextbox'].updateElement(); // this will update text in the hidden textbox that CKE is using.

// or if you have multiple instances 
// for (var i in CKEDITOR.instances) {
//CKEDITOR.instances[i].updateElement(); // to update the textarea
//}

then, I get the value of the textbox as follows:

var mytext = CKEDITOR.instances.txtSomeTextbox.getData();

You can now use mytext to do any validation..

Answer 2

One of your problems is a fundamental misunderstanding about the .validate() method.

Your code...

$("#submit_button").click(function(e){
    ....

    $(" #content_form ").validate({
        ....

Since .validate() is the initialization method of the plugin, it typically gets called once on the DOM ready event. It does not belong inside of the submit button's click handler event because the plugin needs to be initialized before the click event. ( It also does not get called more than once, as all subsequent calls are ignored. ) Besides that, the plugin captures the various click events and automatically performs any defined validations as needed.

$(document).ready(function() { // <-- DOM Ready event
    ....

    $("#content_form").validate({  // <-- Initialize the plugin on this form
        ....

Basic demo of the plugin: http://jsfiddle.net/EN3Yb/