CODEWITHSUNDEEP
javascriptjqueryhtmlcssvalidation
surfbird0713
surfbird0713

Reputation: 1219

ckeditor data not being validated by jQuery validation

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

Upvotes: 17

Views: 26272

Answers (2)

Rohan Patil
Rohan Patil

Reputation: 1963

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

Upvotes: 34

Ram
Ram

Reputation: 144689

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: []
    });
});

Upvotes: 13

Related Questions