Playing with TinyMCE
← Examples
This example shows how to use FormValidation to validate a TinyMCE element.
You should look at the basic principles when integrating FormValidation with other plugins
The hobbies field must be between 5 and 200 characters long. We can't use the stringLength validator since the hobbies can contain HTML tags generated by the editor.
In order to achieve that, use the callback validator instead:
callback: {
message: 'The hobbies must be between 5 and 200 characters long',
callback: function (value, validator, $field) {
// Get the plain text without HTML
var text = tinyMCE.activeEditor.getContent({
format: 'text'
});
return text.length >= 5 && 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 hobbies field must be revalidated when it is changed by the editor:
$(document).ready(function() {
tinymce.init({
selector: 'textarea', // or any other selector ([name="hobbies"], ...)
setup: function(editor) {
editor.on('keyup', function(e) {
// Revalidate the hobbies field
...
});
}
});
// Or
tinymce.init({
selector: 'textarea'
});
tinymce.activeEditor.on('keyup', function(e) {
// Revalidate the hobbies field
...
});
});Below is the working example:
<!-- Include TinyMCE js file -->
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<form id="tinyMCEForm" 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">Hobbies</label>
<div class="col-xs-9">
<textarea class="form-control" name="hobbies" style="height: 200px;"></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() {
tinymce.init({
selector: 'textarea',
setup: function(editor) {
editor.on('keyup', function(e) {
// Revalidate the hobbies field
$('#tinyMCEForm').formValidation('revalidateField', 'hobbies');
});
}
});
$('#tinyMCEForm')
.formValidation({
framework: 'bootstrap',
excluded: [':disabled'],
feedbackIcons: {
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'
}
}
},
hobbies: {
validators: {
callback: {
message: 'The hobbies must be between 5 and 200 characters long',
callback: function(value, validator, $field) {
// Get the plain text without HTML
var text = tinyMCE.activeEditor.getContent({
format: 'text'
});
return text.length <= 200 && text.length >= 5;
}
}
}
}
}
});
});
</script>