问题
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
usingbootstrapvalidator
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.
- you don't need to initiate
CKEditor
on textarea, bootstrapValidator will do it for you. - you need to
excluded: [':disabled'],
notignore: [':disabled'],
if (value === '') {return true;}
value check insidecallback
function you are using in bootstrapValidator, no need of it.
Notes:
- formValidation and bootstrapValidator are two different plugins so one plugin code reference will not work in other plugin
- 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