如何验证CKEditor与引导验证？ [英] How to Validate CKEditor with bootstrapvalidation?

查看：1071
本文介绍了如何验证CKEditor与引导验证？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用 CKEditor 4.5.6 与 bootstrapvalidator 0.5.2



我来自网站 http://formvalidation.io/examples/ckeditor/ 的示例无法使其生效。



Chrome浏览器（其他浏览器未检查）中出现JavaScript控制台错误：


未捕获TypeError：无法读取未定义的属性getEditor


上述错误仅在表单提交时显示。 PHP使用 $。load（...）加载并使用 $。post（...） / p>


注意： - 我无法在JSFiddle中模拟错误。我要验证
CKEditor 使用 bootstrapvalidator


在JSFiddle中添加了完整代码 https://jsfiddle.net/nxxxbw90/4 /



{removePlugins：'sourcearea'}; $（'＃setpolicyform'）。bootstrapValidator（{message：'此值无效'，忽略：['：disabled']，feedbackIcons：{valid：'glyphicon glyphicon-ok' ，invalid：'glyphicon glyphicon-remove'，validating：'glyphicon glyphicon-refresh'}，fields：{policyta：{group：'.lnbrd'，validators：{notEmpty：{message：'指南是必需的， '}，callback：{message：'指南必须小于50000个字符长'，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 = //ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js\"> ;</script><div id =policy-content>< form role =form method =POSTaction =<？php echo $ _SERVER ['PHP_SELF'];？> name =setpolicyformid =setpolicyform> < div class ='box-body pad'> < div class =form-group> < div class =lnbrd> < textarea class =form-control textareaname =policytaid =policytastyle =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 =submitclass =btn btn-danger pull-rightid =setpolicyformsubmitbtn> SAVE< / button> < / div> < / form> < / div>

解决方案


  1. 您不需要启动 CKEditor c> on textarea，bootstrapValidator将为您执行。

  2. 您需要 excluded：['：disabled']， code> ignore：['：disabled']，

  3. if（value ===''）{return true ;} 在 c> callback 中使用的函数你不用在bootstrapValidator中。

注意：


  1. formValidation和bootstrapValidator是两个不同的插件一个插件代码引用在其他插件中不起作用

  2. 您必须使用 CKEditor v4.2或更高版本）

这里是有效的验证码， CKEditor with bootstrapvalidator 

  $（document）.ready（function（）{
 $ '#setpolicyform'）。bootstrapValidator（{
 excluded：['：disabled']，
 feedbackIcons：{
 valid：'glyphicon glyphicon-ok'，
 invalid：'glyphicon glyphicon-remove'，
验证：'glyphicon glyphicon-refresh'
}，
字段：{
 policyta：{
 group：'.lnbrd'，
验证器：{
 notEmpty：{
消息：'指南是必需的，不能为空'
}，
回调：{
 message：'指南必须小于50000个字符长'，
 callback：function（value，validator，$ field）{
 var div = $（'< div />'）。html （0），
 text = div.textContent || div.innerText; 
 return text.length< = 50000; 
} 
} 
} 
} 
} 
}）。find（'[name =policyta]'）
。 （）
 .editor 
 .on（'change'，function（）{
 $（'＃setpolicyform'）。bootstrapValidator（'revalidateField'，'policyta'）; 
 }）; 
}）;

工作小提示示例


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>

解决方案

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

这篇关于如何验证CKEditor与引导验证？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆