我有一个包含多个部分的表格。每个部分均使用 Bootstrap 4 验证手动验证（无需实际提交表单）。这与下面的代码配合得很好；
let eventCreationForm = $(".event-creation-form");
if (!eventCreationForm[0].checkValidity()) {
eventCreationForm.find(":submit").click();
}
但是，我只想突出显示无效的输入。即，不要以绿色突出显示有效输入。我想我不会为此覆盖引导样式，而是尝试删除:valid来自有效输入的伪类。但是，我找不到任何人这样做的例子。我浏览过的问题只是通过 CSS 更改样式。
我想这样的事情可能会起作用，eventCreationForm.find(":valid").removeClass(":valid");但我想它不会，因为它不是一个真正的课程。
下面的示例有一个调用堆栈错误，但这只是这个示例。
$(document).ready(function(){
var forms = document.getElementsByClassName('needs-validation');
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);
});
$(".manual-submit").click(function(){
let eventCreationForm = $(".event-creation-form");
if (!eventCreationForm[0].checkValidity()) {
eventCreationForm.find(":submit").click();
}
})
})
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<form class="needs-validation event-creation-form" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<button class="btn btn-primary manual-submit">Submit form</button>
</form>
你无法摆脱:valid据我所知，根本就是伪类。
然而，这里的问题不是那些伪类。 Bootstrap 4 将按照问题中的要求运行was-validated类是NOT添加到表单中，只要手动添加is-invalid适当的时候上课。
根据Bootstrap 4 文档:
作为后备方案，可以使用 .is-invalid 和 .is-valid 类代替伪类进行服务器端验证。它们不需要 .was-validated 父类。
（强调我的。）
您看到的原因:valid and :invalid伪类的样式是因为was-validated父类的类：
Bootstrap 将 :invalid 和 :valid 样式的范围限定为父 .was-validated 类，通常应用于
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
