Playing with Summernote
← Examples
This example shows how to use FormValidation with Summernote plugin.
You should look at the basic principles when integrating FormValidation with other plugins
Instead of using the callback validator as seen in this example, you can use the transformer option to get the raw text provided by the editor before doing validations
<!-- Include Summernote CSS files -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
<!-- Include Summernote JS file -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
<form id="summernoteForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Post title</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="title" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Post content</label>
<div class="col-xs-9">
<textarea class="form-control" name="content" style="height: 400px;"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#summernoteForm')
.formValidation({
framework: 'bootstrap',
excluded: [':disabled'],
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
title: {
validators: {
notEmpty: {
message: 'The title is required and cannot be empty'
}
}
},
content: {
validators: {
callback: {
message: 'The content is required and cannot be empty',
callback: function(value, validator, $field) {
var code = $('[name="content"]').summernote('code');
// <p><br></p> is code generated by Summernote for empty content
return (code !== '' && code !== '<p><br></p>');
}
}
}
}
}
})
.find('[name="content"]')
.summernote({
height: 400
})
.on('summernote.change', function(customEvent, contents, $editable) {
// Revalidate the content when its value is changed by Summernote
$('#summernoteForm').formValidation('revalidateField', 'content');
})
.end();
});
</script>