JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css">
<link rel="stylesheet" href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
<form id="defaultForm" 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="email" name="cities" id="aa" class="form-control" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-3 control-label">Cities 1</label>
    <div class="col-lg-5">
      <input type="email" name="cities1" id="aa1" class="form-control" value="Amsterdam1,Washington1,Sydney1,Beijing1,Cairo1" 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>

CSS

.label-info {
    background-color: #5bc0de;
}

JavaScript

$(document).ready(function() {
  $('#defaultForm')
    .find('[name="cities"]')
    // Revalidate the color when it is changed
    .change(function(e) {
      console.warn($('[name="cities"]').val());
      console.info($('#aa').val());
      console.info($("#aa").tagsinput('items'));
      var a = $("#aa").tagsinput('items');
      console.log(typeof(a));
      console.log(a.length);
      $('#defaultForm').bootstrapValidator('revalidateField', 'cities');
    })
    .end()
    .find('[name="cities1"]')
    // Revalidate the color when it is changed
    .change(function(e) {
      console.warn($('[name="cities1"]').val());
      console.info($('#aa1').val());
      console.info($("#aa1").tagsinput('items'));
      var a = $("#aa1").tagsinput('items');
      console.log(typeof(a));
      console.log(a.length);
      $('#defaultForm').bootstrapValidator('revalidateField', 'cities1');
    })
    .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'
            }
          }
        },
        cities1: {
          validators: {
            callback: {
              message: 'Please choose 2-4 color you like most',
              callback: function(value, validator) {
                // Get the selected options
                var options = validator.getFieldElements('cities1').tagsinput('items');
                // console.info(options);
                return (options !== null && options.length >= 2 && options.length <= 4);
              }
            }
          }
        }
      }
    })
    .on('success.form.bv', function(e) {
      // Prevent form submission
      e.preventDefault();
    });
});