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