jquery validation of textarea integrated with ckeditor

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

Put this in submit button mousedown() event:

$("#submit").mousedown(function(){
  for (var i in CKEDITOR.instances){
    CKEDITOR.instances[i].updateElement();
  }
});

Answer 3

jQuery validator only validate input fields that are visible but CKEDITOR makes the textarea hidden preventing it from being validated.

Answer 4

I've combined your sugestions and make this little cheat that works with no problem.

My code:

<form id="create-message-form-3" class="form-horizontal" role="form" accept-charset="utf-8">
                <div class="title"><h1>Add Content:</h1></div>
                <div class="col col-12">
                  <textarea class="form-control ckeditor" name="templateeditor" id="templateeditor" rows="6"></textarea>
                  <p class="error"></p>
                </div>



                <div class="text-center">
                    <a class="btn btn-success pull-left" href="create-message-2.php">Back</a>
                    <input class="btn btn-default" type="button" value="Save">
                    <input id="submit-templateeditor" class="btn btn-success pull-right" type="submit" value="Next Step">
                </div>
             </form>

On my .css file, I forced my to be like this:

textarea.ckeditor {
visibility: visible !important;
display: block !important;
height: 0px !important;
border: none !important;
resize:none;
overflow: hidden; }

And my .js validation is the normal format:

    $("#submit-templateeditor").click(function(){
     CKEDITOR.instances.templateeditor.updateElement();
     $("#create-message-form-3").validate({
        rules: {
            templateeditor: "required"
        },
        messages: {
            templateeditor: "Please add some code before continue"
        },
        errorPlacement: function(error, element){
            $(element).each(function (){
                $(this).parent('div').find('p.error').html(error);
            });
        }
    });
});