我有一个使用Bootstrap 4's html5 form validation的表单,如下所示:
(function() {
"use strict";
window.addEventListener("load", function() {
var form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
if (form.checkValidity() == false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
}, false);
}, false);
}());
其中一个字段是文本输入,该文本输入使用typeahead.js来显示预定义标签的列表,以供用户根据其键入的内容进行选择(类似于Stack Overflow)。
//--------- php ---------
<div class="form-group">
<input type="text" class="form-control" id="tags" value="<?php echo esc_html($tags ?? ''); ?>" data-role="tagsinput" required>
<small class="form-text">Enter at least one tag</small>
<div class="invalid-feedback">Please enter at least one tag</div>
</div>
//------- javascript --------
var category_terms = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('term'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: <?php echo json_encode($list); ?>
});
category_terms.initialize();
jQuery('#tags').tagsinput({
itemValue: 'id',
itemText: 'term',
typeaheadjs: {
name: 'category_terms',
displayKey: 'term',
source: category_terms.ttAdapter()
}
});
jQuery('#myForm').submit(function(e){
if (jQuery('#tags').val().length == 0 ) {
jQuery('.bootstrap-tagsinput').addClass('is-invalid');
} else {
jQuery('.bootstrap-tagsinput').removeClass('is-invalid').addClass('is-valid');
}
});
如果用户使用空白输入字段或未在预定义列表中添加标签的形式提交表单,则.was-validated
类将应用于预输入<span>
,从而在旁边显示绿色对勾不正确(或为空)的标签。
是否有任何方法可以通过禁用对该元素的验证或删除.was-validated
/ is-valid
类来防止此行为?
我尝试了各种方法,包括此question中的解决方案(以及与之相似的解决方案)。