How To Validate Ckeditor With Bootstrapvalidation?

Using CKEditor 4.5.6 with bootstrapvalidator 0.5.2 I followed example from website http://formvalidation.io/examples/ckeditor/ however couldn't make it validate. Also getting Java

Solution 1:

Couple of mistakes in your approach.

1. you don't need to initiate CKEditor on textarea, bootstrapValidator will do it for you.
2. you need to excluded: [':disabled'], not ignore: [':disabled'],
3. if (value === '') {return true;} value check inside callback function you are using in bootstrapValidator, no need of it.

Notes:

1. formValidation and bootstrapValidator are two different plugins so one plugin code reference will not work in other plugin
2. you have to use CKEditor v4.2 or later (which you are already using)

Here is working validation code, CKEditor with bootstrapvalidator

$(document).ready(function() {
  $('#setpolicyform').bootstrapValidator({
      excluded: [':disabled'],
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        policyta: {
          group: '.lnbrd',
          validators: {
            notEmpty: {
              message: 'The Guidelines is required and cannot be empty'
            },
            callback: {
              message: 'The Guidelines must be less than 50000 characters long',
              callback: function(value, validator, $field) {
                var div = $('<div/>').html(value).get(0),
                  text = div.textContent || div.innerText;
                return text.length <= 50000;
              }
            }
          }
        }
      }
    }).find('[name="policyta"]')
    .ckeditor()
    .editor
    .on('change', function() {
      $('#setpolicyform').bootstrapValidator('revalidateField', 'policyta');
    });
});

Working Fiddle Example

Solution 2:

I hope this will help to you

You need to use below ckeditor version (i am not sure it working or not for later versions).

<scriptsrc="//cdn.ckeditor.com/4.4.3/basic/ckeditor.js"></script><scriptsrc="//cdn.ckeditor.com/4.4.3/basic/adapters/jquery.js"></script>

and then after

.find('[name="policyta"]')
.ckeditor()
.editor
.on('change', function () {
    $('#yourformid').bootstrapValidator('revalidateField', 'policyta');
});

or Use below code

CKEDITOR.instances.policyta.updateElement();