Jquery validation not working with ckeditor

PHPCoder picture PHPCoder · Mar 7, 2014 · Viewed 39.2k times · Source

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,
                     minlength: 10
                    }
                 }
            });
        });
      </script>

FYI : jQuery validation working for other form fields expect the ckeditor textarea field

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

Answer

PHPCoder picture PHPCoder · Mar 10, 2014

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...