【发布时间】：2019-11-30 06:19:24
【问题描述】：
我在我的表单上使用 boostrap 表单验证，仅用于 2 个输入文本（我不想验证单选按钮）。
我的问题是，当在输入文本上显示错误（需要一个值）时，它会禁用单选按钮，甚至更改单选按钮文本的颜色。如何避免这种情况？
这里是代码
<div class="form-group">
<label for="txtDatenaissance">Date de naissance</label>
<input type="text" class="form-control" id="txtDateNaissance"
name="txtDateNaissance" data-provide="datepicker"
placeholder="JJ/MM/YYYY" data-date-format="dd/mm/yyyy" required="required"/>
<div class="invalid-feedback">
La date de naissance est obligatoire
</div>
</div>
<div class="form-group">
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" class="custom-control-input" id="rdoOui" name="rdoRetraite" value="1" />
<label class="custom-control-label" for="rdoOui">Oui</label>
</div>
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" class="custom-control-input" id="rdoNon" name="rdoRetraite" value="0" checked="checked" />
<label class="custom-control-label" for="rdoNon">Non</label>
</div>
</div>
<div id="divMetier" class="form-group d-none">
<label for="txtMetier">Métier exercé</label>
<input type="text" class="form-control" id="txtMetier" name="txtMetier" valueId="0" required="required" />
<div class="invalid-feedback">
Le métier est obligatoire
</div>
</div>
在 JS 中：
$( document ).ready(function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
经过调查，问题似乎与所有自定义类有关，因为如果我使用表单检查类，它会很好用（所以正常的按钮：它很丑但它可以工作）。
【问题讨论】：
标签： forms validation bootstrap-4