【发布时间】：2017-11-30 00:00:54
【问题描述】：
我正在尝试使用引导程序来掌握标签输入功能，但显然我错过了一些东西！我尝试严格按照文档进行操作，但未能正常工作——输入总是显示为值列表，而不是标签。所以我尝试复制一个明显有效的 JS fiddle 示例，但是当我将代码复制到我的代码编辑器时，同样的事情发生了。我相信我已经包含了对所需库的所有引用，但显然做错了。这是我的测试代码：
$(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>任何指针都将不胜感激，因为这让我发疯！！！
【问题讨论】：
-
如果它帮助您解决问题，请标记答案。
标签： javascript jquery twitter-bootstrap tags bootstrap-tags-input