jquery validation of textarea integrated with cked

Question

I have a text-area

<td><textarea id="event-body" name="body">
<p class="error"></p>

That is integrated with CKEDITOR

CKEDITOR.replace("event-body")

And jquery validate plugin. And the code is like this

$('#event').validate({
    rules:{
        name:{
            required: true
        },  
    },
    messages:{
        body:{
            required: "event body is required"
        }
    },
    errorPlacement: function(error, element){
        $(element).each(function (){
            $(this).parent('td').find('p.error').html(error);
        })
    });

The code works just fine but when I type into my textarea element, I still get the error message until I click it twice. i.e. I have to submit my page twice so that I don't error message even if textarea is not empty.

Isn't there a way to validate it smoothly(without having to click it twice).

Answer 1

Take a look here

Basically you need to call

CKEDITOR.instances.editor1.updateElement();

before running validation.

Just replace editor1 with the name of your textarea.

Then call

$(myformelement).validate();

EDIT

$("#my-form-submit-button").click(function(e){
     e.preventDefault();
     CKEDITOR.instances.event-body.updateElement();
     $('#event').validate({
          ...options as above..
     });o
})

Answer 2

Use this in your javascript where you are validating your form. It will update your ckeditor and will assign ckeditor's value to your textarea to which you integrate it.

It should run before form is submitted:

CKEDITOR.instances.editor1.updateElement();

Answer 3

If you are attaching it like

$("#Detail").ckeditor(config);

than you will need to use something like this

var editor = $('#Detail').ckeditorGet();
editor.updateElement();

I use this example function to submit my form in this case

function SubmitEvent(){
    var editor = $('#Detail').ckeditorGet();
    editor.updateElement();
    if($("#EventForm").valid()) {
        $('#EventForm').submit();
    }
}