Validation with CKEDITOR

http://stackoverflow.com/questions/22248918/jquery-validation-not-working-with-ckeditor

by ryleyb

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="http://openconcept.ca/sites/all/libraries/ckeditor/ckeditor.js"></script>
<form class="form-horizontal" role="form" name="f3" id="f3">
    <div class="col-xs-8">
        <textarea class="ckeditor" name="cktext" id="cktext"></textarea>
        <input type="submit" id="submit_button" />
    </div>
</form>

JavaScript

$("#f3").validate({
    rules: {
        cktext: {
            required: true,
            minlength: 10
        }
    },
    submitHandler: function () {
        alert('successful submit');
    }
});

//deal with copying the ckeditor text into the actual textarea
CKEDITOR.on('instanceReady', function () {
    $.each(CKEDITOR.instances, function (instance) {
        CKEDITOR.instances[instance].document.on("keyup", CK_jQ);
        CKEDITOR.instances[instance].document.on("paste", CK_jQ);
        CKEDITOR.instances[instance].document.on("keypress", CK_jQ);
        CKEDITOR.instances[instance].document.on("blur", CK_jQ);
        CKEDITOR.instances[instance].document.on("change", CK_jQ);
    });
});

function CK_jQ() {
    for (instance in CKEDITOR.instances) {
        CKEDITOR.instances[instance].updateElement();
    }
}