[ACCEPTED]-jquery validation of textarea integrated with ckeditor-ckeditor

Accepted answer
Score: 13

Take a look here

Basically you need to call


before 2 running validation.

Just replace editor1 with the 1 name of your textarea.

Then call



          ...options as above..
Score: 4

Put this in submit button mousedown() event:

  for (var i in CKEDITOR.instances){


Score: 4

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

Score: 2

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

My 3 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 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">

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

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

And my .js validation is the normal 1 format:

        rules: {
            templateeditor: "required"
        messages: {
            templateeditor: "Please add some code before continue"
        errorPlacement: function(error, element){
            $(element).each(function (){
Score: 1

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

It should run before form is submitted:

Score: 1

If you are attaching it like


than you will 3 need to use something like this

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

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

function SubmitEvent(){
    var editor = $('#Detail').ckeditorGet();
    if($("#EventForm").valid()) {
Score: 1

I would prefer to update each instance on 2 blur event, so you don't need to change 1 anything on your submit function! :)

CKEDITOR.instances.myInstance.on('blur', function( e ){
Score: 1

jQuery .validate() function provides "onsubmit" option 5 to perform custom action before validation. By 4 default it is set to true. I have 3 used it in my project and it works very 2 well.

          onsubmit: function(){
                    return true;
                    title:{required:"Please enter a title"},
                    content:{required:"Please enter some content"}
                submitHandler : function(form){

    function CKEditorUpdate() {
        for (instance in CKEDITOR.instances)

This is a cleaner and much easier to 1 understand approach. Refer http://jqueryvalidation.org/validate#onsubmit

Score: 0

IF your using SPRY, This is what worked 1 for me....

$(document).ready(function () {

    CKEDITOR.instances["editor1"].on("instanceReady", function () {

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


    CKEDITOR.instances["editor2"].on("instanceReady", function () {

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


    CKEDITOR.instances["editor3"].on("instanceReady", function () {

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



More Related questions