Playing with CKEditor
← Examples
This example shows how to use FormValidation to validate a CKEditor element.
You should look at the basic principles when integrating FormValidation with other plugins
Single editor
The Bio field is required and must be less than 200 characters long. We can't use the stringLength validator since the bio can contain HTML tags generated by the editor.
In order to achieve that, use the callback validator instead:
callback: {
message: 'The bio must be less than 200 characters long',
callback: function(value, validator, $field) {
// Get the plain text without HTML
var div = $('<div/>').html(value).get(0),
text = div.textContent || div.innerText;
return text.length <= 200;
}
} Instead of using the callback validator, you can use the transformer option to get the raw text provided by the editor before doing validations
As mentioned in the Compatibility section, the bio field must be revalidated when it is changed by the editor:
$(document).ready(function() {
$('#profileForm')
.find('[name="bio"]')
.ckeditor()
.editor // Get the editor instance
.on('change', function() { // Called when the value is changed
// Revalidate the bio field
...
});
}); To trigger the 'change' event, you have to use CKEditor v4.2 or later
Below is the working example:
<!-- Include CKEditor and jQuery adapter -->
<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>
<form id="profileForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="fullName" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Bio</label>
<div class="col-xs-9">
<textarea class="form-control" name="bio" style="height: 400px;"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#profileForm')
.formValidation({
framework: 'bootstrap',
excluded: [':disabled'],
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fullName: {
validators: {
notEmpty: {
message: 'The full name is required and cannot be empty'
}
}
},
bio: {
validators: {
notEmpty: {
message: 'The bio is required and cannot be empty'
},
callback: {
message: 'The bio must be less than 200 characters long',
callback: function(value, validator, $field) {
if (value === '') {
return true;
}
// Get the plain text without HTML
var div = $('<div/>').html(value).get(0),
text = div.textContent || div.innerText;
return text.length <= 200;
}
}
}
}
}
})
.find('[name="bio"]')
.ckeditor()
.editor
// To use the 'change' event, use CKEditor 4.2 or later
.on('change', function() {
// Revalidate the bio field
$('#profileForm').formValidation('revalidateField', 'bio');
});
});
</script>Multiple editors
You can easily use and validate multiple CKEditor instances as the following code:
$(document).ready(function() {
$('#postForm')
.formValidation({
framework: 'bootstrap',
excluded: [':disabled'],
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
summary: {
validators: {
...
}
},
content: {
...
}
}
})
.find('[name="summary"], [name="content"]')
.each(function() {
$(this)
// Attach an editor to field
.ckeditor()
.editor
.on('change', function(e) {
// Revalidate the field that
// the current editor is attached to
// e.sender.name presents the field name
$('#postForm').formValidation('revalidateField', e.sender.name);
});
});
}); The example also uses the transformer option to indicate the pure value of field from the editor before performing validations
<!-- Include CKEditor and jQuery adapter -->
<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>
<form id="postForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Title</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="title" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Summary</label>
<div class="col-xs-9">
<textarea class="form-control" name="summary" style="height: 400px;"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Content</label>
<div class="col-xs-9">
<textarea class="form-control" name="content" style="height: 400px;"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#postForm')
.formValidation({
framework: 'bootstrap',
excluded: [':disabled'],
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
title: {
validators: {
notEmpty: {
message: 'The full name is required and cannot be empty'
}
}
},
summary: {
validators: {
notEmpty: {
message: 'The summary is required and cannot be empty'
},
callback: {
message: 'The summary must be less than 200 characters long',
callback: function(value, validator, $field) {
if (value === '') {
return true;
}
// Get the plain text without HTML
var div = $('<div/>').html(value).get(0),
text = div.textContent || div.innerText;
return text.length <= 200;
}
}
}
},
content: {
// Use the same transformer for all validators
transformer: function($field, validatorName, validator) {
var value = $field.val();
if (value === '') {
return value;
}
// Get the plain text without HTML
var div = $('<div/>').html(value).get(0),
text = div.textContent || div.innerText;
return text;
},
validators: {
notEmpty: {
message: 'The content is required and cannot be empty'
},
stringLength: {
message: 'The content must be less than 1000 characters long',
max: 1000
}
}
}
}
})
.find('[name="summary"], [name="content"]')
.each(function() {
$(this)
.ckeditor()
.editor
.on('change', function(e) {
$('#postForm').formValidation('revalidateField', e.sender.name);
});
});
});
</script>