¿Cómo validar CKEditor con bootstrapvalidation?

Usando CKEditor 4.5.6 con bootstrapvalidator 0.5.2

Seguí el ejemplo del sitio web http://formvalidation.io/examples/ckeditor/, pero no pude validarlo.

También obtengo el error de la consola de JavaScript en el navegador Chrome (el otro navegador no lo verificó) como:

No se detectó TypeError: no se puede leer la propiedad ‘getEditor’ de undefined

El error anterior se muestra solo en el envío del formulario. Formulario PHP cargado usando $.load(...) y publicado usando $.post(...)

Nota: – No pude simular un error en JSFiddle. Quiero validar CKEditor usando bootstrapvalidator

Código completo agregado en JSFiddle https://jsfiddle.net/nxxxbw90/4/

 var editor; $(document).ready(function(){ editor=CKEDITOR.replace('policyta', { removePlugins: 'sourcearea' }); $('#setpolicyform').bootstrapValidator({ message: 'This value is not valid', ignore: [':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) { if (value === '') { return true; } var div = $('
').html(value).get(0), text = div.textContent || div.innerText; return text.length <= 50000; } } } } } }).on('success.form.bv', function(e){ e.preventDefault(); e.stopImmediatePropagation(); var $form = $("#setpolicyform"), $url = $form.attr('action'); $.post($url,$form.serialize()).done(function(dte){ $("#policy-content").html(dte); loadfunctions(); }); }); editor.on('change', function(ev){ $("#setpolicyform").bootstrapValidator('revalidateField', 'policyta'); }); });
     
<form role="form" method="POST" action="" name="setpolicyform" id="setpolicyform">

Un par de errores en su enfoque.

  1. no es necesario que inicie CKEditor en textarea, bootstrapValidator lo hará por usted.
  2. debe excluded: [':disabled'], no ignore: [':disabled'],
  3. if (value === '') {return true;} control de valor dentro de la función de callback que está utilizando en bootstrapValidator, no es necesario.

Notas:

  1. formValidation y bootstrapValidator son dos complementos diferentes, por lo que una referencia de código de complemento no funcionará en otro complemento
  2. tienes que usar CKEditor v4.2 o posterior (que ya estás usando)

Aquí está trabajando el código de validación, CKEditor con 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 = $('
').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'); }); });

Ejemplo de violín de trabajo

Espero que esto te ayude.

Debe usar la siguiente versión de ckeditor (no estoy seguro de que funcione o no para versiones posteriores).

   

y luego después

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

o Use el código de abajo

 CKEDITOR.instances.policyta.updateElement(); 
    Intereting Posts