Search code examples
javascriptjquerytwitter-bootstraptagsbootstrap-tags-input

Tags input with Bootstrap not working

I'm trying to get to grips with the tags input function with bootstrap and am clearly missing something! I tried following the documentation to the letter and failed to get it working - the inputs always just show as a list of values, not tags. So I tried copying a JS fiddle example which was clearly working, and yet when I copy the code to my code editor, the same thing happens. I believe I have included all the references to the required libraries but clearly doing something wrong. Here's my test code:

$(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();
    });
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css">

<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="text" 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="text" 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>

Any pointers would be greatly appreciated as this is driving me mad!!!

Solution

  • I believe I have included all the references to the required libraries but clearly doing something wrong.

    The first part is incorrect and second is correct.

    You haven't added all references to the libraries since you are missing the main

    1. jquery library on which all your script is dependent.
    2. i see that you are using bootstrap with dropdowns and they require popper.js to work correctly and if you notice in your console by pressing F12 you will be receiving the error

    Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)

    so you should include all the dependencies before expecting it to work correctly, and for including popper from a CDN link do not include any other than the umd version for when using the CDN link other versions are having problems see here, you should load your scripts in the following order and it will work 

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/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/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>