ckeditor data not being validated by jQuery validation

Question

I know there are loads of questions out there about this but I can't get this to work for the life of me. I have tried several solutions including this, the second answer here and this, and I can't get the "required" message to appear. The form still submits when the ckeditor field is empty.

I looked at the documentation here and am able to pass the contents of the editor to an alert but am not experienced enough to know how to integrate this with the validation plugin. I've spent so much time on this - can anyone please help?

Here is my current code, and I created a fiddle: http://jsfiddle.net/BmZ93/1/

     $('#add-job').validate({
                rules: {
                editor1: {
                    required: function() 
                    {
                    CKEDITOR.instances.editor1.updateElement();
                    }
                    }
                },
                messages: {
                Job_Title: "Required",
                Job_Location: "Required",
                jobid: "Required",
                Job_Cat: "Required",
                editor1: "Required"
                } 
        });

Answer 1

Here it is update your code with this

http://jsfiddle.net/rohanppatil/BmZ93/8/

$(document).ready(function() {
$('#add-job').validate({
    ignore: [],         
    rules: {
                editor1: {
                    required: function() 
                    {
                    CKEDITOR.instances.editor1.updateElement();
                    }
                    }
                },
                messages: {
                Job_Title: "Required",
                Job_Location: "Required",
                jobid: "Required",
                Job_Cat: "Required",
                editor1: "Required"
                },
                /* use below section if required to place the error*/
                errorPlacement: function(error, element) 
                {
                    if (element.attr("name") == "editor1") 
                   {
                    error.insertBefore("textarea#editor1");
                    } else {
                    error.insertBefore(element);
                    }
                }
            });
});

Hope this will work I tested this in JSFIDDLE working fine

Answer 2

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

ignore: [] 

http://jsfiddle.net/BmZ93/5/

Also note that you should return a boolean value in your required method, you don't. Here passing true suffices.

required: true

This is the updated code which also uses errorPlacement method for adding a border to the CKEDITOR wrapper, you can customize it according to your needs:

$(document).ready(function () {
    $('#add-job').validate({
        rules: {
            'editor1': {
                required: true
            }
        },
        messages: {
            Job_Title: "Required",
            Job_Location: "Required",
            jobid: "Required",
            Job_Cat: "Required",
            editor1: "Required"
        },
        errorPlacement: function(error, $elem) {
            if ($elem.is('textarea')) {
                $elem.next().css('border', '1px solid red');
            }
        },
        ignore: []
    });
});