第一次单击时CKEditor无法验证JQUERY验证

Question

I am integrating JQUERY Validation with CKEDITOR.

This is my HTML

<div class="clearfix"></div>
<div class="col-md-12">
    <div class="form-group">
        <label class="control-label col-md-2">Text<span class="required">*</span></label>
        <div class="col-md-8">
            <textarea name="text" id="editor1" class="form-control ckeditor" style="height:100px;"><?= $results[0]['text']; ?></textarea>
            <span class="help-block"></span>
        </div>
    </div>
</div>

And this is my Footer

<script src="<?= site_url('theme/black/assets/plugins/ckeditor/ckeditor.js') ?>" type="text/javascript"></script>
<script src="<?= site_url('theme/black/assets/plugins/ckeditor/styles.js') ?>" type="text/javascript"></script>
<script>
CKEDITOR.replace('editor');
</script>

And this is my code for Jquery Validation

<script>

    $(document).ready(function () {

        $('#edit_banner').validate({
            errorElement: 'span',
            errorClass: 'error',
            focusInvalid: false,
            ignore: "",
            rules: {
                title: {
                    required: true
                },
                text: {
                    required: true
                },
                sort: {
                    required: true
                },
                show_on_dashboard: {
                    required: true
                }
            }
        });
    });

</script>

But the issue is that CKEDITOR is checked on 2nd click. Not on first. I searched allot and found this

for (instance in CKEDITOR.instances) {
    CKEDITOR.instances[instance].on("instanceReady", function () {
        //set keyup event
        this.document.on("keyup", function () { CKEDITOR.instances[instance].updateElement(); });
        //and paste event
        this.document.on("paste", function () { CKEDITOR.instances[instance].updateElement(); });
    });
}

But I don't know where to put it? Can any1 help?

UPDATE

I made changes and put the code inside script tag but it is still not working

<script>

    for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].on("instanceReady", function () {
            //set keyup event
            this.document.on("keyup", function () {
                CKEDITOR.instances[instance].updateElement();
            });
            //and paste event
            this.document.on("paste", function () {
                CKEDITOR.instances[instance].updateElement();
            });
        });
    }

    $(document).ready(function () {

        $('#edit_banner').validate({
            errorElement: 'span',
            errorClass: 'error',
            focusInvalid: false,
            ignore: "",
            rules: {
                title: {
                    required: true
                },
                text: {
                    required: true
                },
                sort: {
                    required: true
                },
                show_on_dashboard: {
                    required: true
                }
            }
        });
    });

</script>

Answer 1

i too had this problem a long time back..finally i found that there were two event handlers working together in the script I think your problem is in this portion

for (instance in CKEDITOR.instances) {
    CKEDITOR.instances[instance].on("instanceReady", function () {
        //set keyup event
        this.document.on("keyup", function () { CKEDITOR.instances[instance].updateElement(); });
        //and paste event
        this.document.on("paste", function () { CKEDITOR.instances[instance].updateElement(); });
    });
} 

remove one event handler as per your need..for example like this

for (instance in CKEDITOR.instances) {       
            //set keyup event
            this.document.on("keyup", function () { CKEDITOR.instances[instance].updateElement(); });
            //and paste event
            this.document.on("paste", function () { CKEDITOR.instances[instance].updateElement(); });
    } 

hope this may help..:-)

Answer 2

I resolved the issue using this code.

<script>
    $(document).ready(function () {
        jQuery.validator.addMethod("cke_required", function (value, element) {
            var idname = $(element).attr('id');
            var editor = CKEDITOR.instances[idname];
            $(element).val(editor.getData());
            return $(element).val().length > 0;
        }, "This field is required");

        $('#add_banner').validate({
            errorElement: 'span',
            errorClass: 'error',
            focusInvalid: false,
            ignore: "",
            rules: {
                text: {
                    cke_required: true
                },
                title: {
                    required: true
                },
                sort: {
                    required: true
                },
                show_on_dashboard: {
                    required: true
                },
                image: {
                    required: true
                }
            }
        });
    });

</script>