Examples / Compatibility

Play with CKEditor

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

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

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

Using CKEditor v4.2 or later

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-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">Bio</label>
        <div class="col-md-9">
            <textarea class="form-control" name="bio" style="height: 400px;"></textarea>
        </div>
    </div>
</form>

$(document).ready(function() {
    $('#profileForm')
        .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'
                        }
                    }
                },
                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) {
                                // 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').bootstrapValidator('revalidateField', 'bio');
                });
});