0
私は、ブートストラップ付きのタグ入力機能を手に入れようとしています。私は手紙に書類を従おうとしたが、それを働かせることができなかった。入力は常にタグだけでなく値のリストとして表示される。だから私は明らかに動作していたJSのフィーリンの例をコピーしようとしましたが、コードエディタにコードをコピーするときにも同じことが起こります。私は、必要なライブラリへのすべての参照を含めたが、間違ったことを明確にしていると思う。ここに私のテストコードは次のとおりです。ブートストラップで入力されたタグが動作しない
$(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>これは怒っ私を運転しているよう任意のポインタをいただければ幸いです！
あなたのための答えが追加されました。 –
あなたはそれを修正することになった私は私の答えの下にコメントを追加しましたあなたが隠されたラベルのためにあなたを助けるかどうか参照してください –