Question

我试图通过bootstrap来处理标签输入功能，但显然缺少了一些东西！我尝试按照文档中的说明进行操作，但未能使其正常工作 - 输入始终只显示为值列表，而不是标记。所以我尝试复制一个明显有效的JS小提琴示例，然而当我将代码复制到我的代码编辑器时，同样的事情发生了。我相信我已经包含了对所需库的所有引用，但显然做错了。这是我的测试代码：

＆＃13;

$(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();
    });
});

＆＃13;

<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>

＆＃13;

任何指针都会非常感激，因为这让我很生气！

Answer 1

我相信我已经包含了所有必需的参考资料图书馆但显然做错了。

第一部分不正确，第二部分是正确的。

由于缺少主要的

，您尚未添加对libraries的所有引用

jquery库。
我发现您正在使用bootstrap下拉列表并且需要popper.js才能正常工作，如果您在console中注意到F12，则会收到错误

未捕获错误：Bootstrap下拉列表需要Popper.js （https://popper.js.org）

因此，您应该在希望它正常工作之前包含所有依赖项，并且在CDN链接中包含popper时，除了使用umd版本时，不要包含CDN版本。 }链接其他版本遇到问题请参阅here，您应该按以下顺序加载脚本并且它将起作用

<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>

使用Bootstrap输入的标签不起作用

1 个答案: