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>날 미친 운전은!
방금 답변을 추가했습니다. –
당신이 그것을 해결할 수 내 대답 아래에 코멘트를 추가하면 숨겨진 라벨을 당신을 도와줍니다 참조하십시오 –