Examples / Compatibility

<!-- Include Bootstrap-tagsinput CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.css" />

<!-- Include Bootstrap-tagsinput JS -->
<script src="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.min.js"></script>

<form id="bootstraptagsinputForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Cities</label>
        <div class="col-lg-5">
            <input type="text" name="cities" class="form-control"
                   value="Hanoi" data-role="tagsinput" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label">Countries</label>
        <div class="col-lg-5">
            <input type="text" name="countries" class="form-control"
                   value="Vietnam" data-role="tagsinput" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-5 col-lg-offset-3">
            <button type="submit" class="btn btn-default">Validate</button>
        </div>
    </div>
</form>

$(document).ready(function () {
    $('#bootstraptagsinputForm')
        .find('[name="cities"]')
            // Revalidate the cities field when it is changed
            .change(function (e) {
                $('#bootstraptagsinputForm').bootstrapValidator('revalidateField', 'cities');
            })
            .end()
        .find('[name="countries"]')
            // Revalidate the countries field when it is changed
            .change(function (e) {
                $('#bootstraptagsinputForm').bootstrapValidator('revalidateField', 'countries');
            })
            .end()
        .bootstrapValidator({
            excluded: ':disabled',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                cities: {
                    validators: {
                        notEmpty: {
                            message: 'Please enter at least one city you like the most.'
                        }
                    }
                },
                countries: {
                    validators: {
                        callback: {
                            message: 'Please enter 2-4 countries you like most.',
                            callback: function (value, validator) {
                                // Get the entered elements
                                var options = validator.getFieldElements('countries').tagsinput('items');
                                return (options !== null && options.length >= 2 && options.length <= 4);
                            }
                        }
                    }
                }
            }
        });
});