TinyMCE with BootstrapValidator

How to make it working this code?
I like to combine validation and TinyMCE.
What is wrong with the code? Need help.

<!DOCTYPE html>
<html>
<head>
 <title>TinyMCE with BootstrapValidator</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">



<script src="jquery.js"></script>

<script href="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.2/jquery.tinymce.min.js"></script>

<link rel="stylesheet" href="bootstrap.css"  media="all" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>

<style type="text/css">
    #tinyMCEForm {
    margin: 2.5% 2.5%;
}
  </style>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function () {
    tinymce.init({
        selector: 'textarea',
        setup: function (editor) {
            editor.on('keyup', function (e) {
                console.debug('Editor contents was modified. Contents: ' + editor.getContent({
                    format: 'text'
                }));
                $('#tinyMCEForm').bootstrapValidator('revalidateField', 'hobbies');
            });
        }
    });
    $('#tinyMCEForm')
        .bootstrapValidator({
        excluded: [':disabled'],
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            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;
                        }
                    }
                }
            }
        }
    })
        .on('success.form.bv', function (e) {
        e.preventDefault();
    });
});
});//]]>

</script>


</head>

<body>
  <form id="tinyMCEForm" method="post" class="form-horizontal">
    <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>
    <div class="form-group">
        <div class="col-md-5 col-md-offset-3">
            <button type="submit" name="myBtn" class="btn btn-default">Validate</button>
        </div>
    </div>
</form>

<script src="bootstrap.min.js"></script>
</body>

</html>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.