PHPCoder PHPCoder - 7 months ago 246
Javascript Question

Jquery validation not working with ckeditor

I am using jQuery to validate forms.. but when I use CKeditor and try to validate it using jQuery, it's not working.

Here is the snippet of HTML code

<form class="form-horizontal" role="form" name="f3" id="f3" >
<div class="col-xs-8">
<textarea class="ckeditor" name="cktext" id="cktext"></textarea>
</div>
<button type="submit" class="btn btn-default btn-success">Submit</button>
</form>


Here is the form validation code

<script>
$(document).ready(function(){
$("#f3").validate(
{
debug: false,
rules: {
cktext:{

required:true,
minlenght:10
}
}
});
});
</script>


FYI : jquery validation working for other form fields expect the ckeditor textarea filed

Any suggestions.. to get rid of this problem..

Answer

Finally i found the answer to my question...

I changed the value of ignore property which by default holds :hidden value. as CKEDITOR hides the textarea jQuery validation doesn't validate the element:

   ignore: []  

Just i changed the validation script as follows..

     $(document).ready(function(){

            $("#f3").validate(
            {
                ignore: [],
              debug: false,
                rules: { 

                    cktext:{
                         required: function() 
                        {
                         CKEDITOR.instances.cktext.updateElement();
                        },

                         minlength:10
                    }
                },
                messages:
                    {

                    cktext:{
                        required:"Please enter Text",
                        minlength:"Please enter 10 characters"


                    }
                }
            });
        });

HTML snippet is

   <form class="form-horizontal" role="form" name="f3" id="f3" >
     <div class="col-xs-8">
        <textarea class="ckeditor" name="cktext" id="cktext"></textarea>
    </div>
     <button type="submit" class="btn btn-default btn-success">Submit</button>
   </form>

As i found this answer in Here

Thanks to all...