How to Validate CKEditor with bootstrapvalidation?

半城伤御伤魂 提交于 2019-12-12 01:37:04

问题


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 JavaScript Console Error in Chrome Browser(Other Browser didn't check) as:

Uncaught TypeError: Cannot read property 'getEditor' of undefined

Above Error is displayed only on Form Submission. PHP Form loaded using $.load(...) and posted using $.post(...)

Note:- I couldn't simulate error in JSFiddle. I want to validate CKEditor using bootstrapvalidator

Added Full code in 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  = $('<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');
	});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.css" rel="stylesheet"/>
<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="policy-content">
<form role="form" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="setpolicyform" id="setpolicyform">
	<div class='box-body pad'>
		<div class="form-group">
		<div class="lnbrd">
		<textarea class="form-control textarea" name="policyta" id="policyta" style="width: 100%; height: 400px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
		</div>
		</div>
	</div>
	<div class="box-footer clearfix">
		<button type="submit" class="btn btn-danger pull-right" id="setpolicyformsubmitbtn">SAVE</button>
	</div>
	</form>
  </div>

回答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




回答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).

<script src="//cdn.ckeditor.com/4.4.3/basic/ckeditor.js"></script>
<script src="//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();


来源:https://stackoverflow.com/questions/34452994/how-to-validate-ckeditor-with-bootstrapvalidation

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!