JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.css">
<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/4.4.6/basic/adapters/jquery.js"></script>
<div id="policy-content">
<form role="form" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="setpolicyform" id="setpolicyform">
<div class='box-body pad'>
<div class="form-group">
<div class="lnbrd">
<textarea class="form-control textarea" name="policyta" id="policyta" style="width: 100%; height: 400px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
</div>
</div>
</div>
<div class="box-footer clearfix">
<button type="submit" class="btn btn-danger pull-right" id="setpolicyformsubmitbtn">SAVE</button>
</div>
</form>
</div>
JavaScript
$(document).ready(function() {
$('#setpolicyform').bootstrapValidator({
excluded: [':disabled'],
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
policyta: {
group: '.lnbrd',
validators: {
notEmpty: {
message: 'The Guidelines is required and cannot be empty'
},
callback: {
message: 'The Guidelines must be less than 50000 characters long',
callback: function(value, validator, $field) {
var div = $('<div/>').html(value).get(0),
text = div.textContent || div.innerText;
return text.length <= 50000;
}
}
}
}
}
}).find('[name="policyta"]')
.ckeditor()
.editor
.on('change', function() {
$('#setpolicyform').bootstrapValidator('revalidateField', 'policyta');
});
});