FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

Playing with Bootstrap Touchspin


This example shows how to integrate with the Bootstrap Touchspin plugin.

You should look at the basic principles when integrating FormValidation with other plugins
<!-- Include Bootstrap Touchspin file -->
<link rel="stylesheet" href="" />
<script src=""></script>

Adjust the icon position
#touchspinForm .percentageContainer .form-control-feedback {
    right: -15px;

<form id="touchspinForm" method="post" class="form-horizontal">
    <div class="form-group percentageContainer">
        <label class="col-xs-3 control-label">Percent</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="percentage" />

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Validate</button>

$(document).ready(function() {
            framework: 'bootstrap',
            excluded: ':disabled',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            fields: {
                percentage: {
                    validators: {
                        between: {
                            min: 0,
                            max: 100,
                            message: 'The percentage must be between 0 and 100'
                min: 0,
                max: 100
            .on('change touchspin.on.min touchspin.on.max', function() {
                // Revaliate the field
                $('#touchspinForm').formValidation('revalidateField', 'percentage');