Examples / Compatibility

Play with TinyMCE

This example shows how to use BootstrapValidator to validate a TinyMCE element.

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;
    }
}

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-md-3 control-label">Full name</label>
        <div class="col-md-5">
            <input type="text" class="form-control" name="fullName" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-3 control-label">Hobbies</label>
        <div class="col-md-9">
            <textarea class="form-control" name="hobbies" style="height: 200px;"></textarea>
        </div>
    </div>
</form>

$(document).ready(function() {
    tinymce.init({
        selector: 'textarea',
        setup: function(editor) {
            editor.on('keyup', function(e) {
                // Revalidate the hobbies field
                $('#tinyMCEForm').bootstrapValidator('revalidateField', 'hobbies');
            });
        }
    });
    $('#tinyMCEForm')
        .bootstrapValidator({
            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;
                            }
                        }
                    }
                }
            }
        });
});

Comments

Don't submit the issue here

If you want to report a bug, please submit the issue on Github. For a general question or feedback, use the form below.