我有一个包含多个部分的表单。每个部分都使用 Bootstrap 4 验证手动验证(无需提交真实表单)。这适用于下面的代码;
let eventCreationForm = $(".event-creation-form");
if (!eventCreationForm[0].checkValidity()) {
eventCreationForm.find(":submit").click();
}
Run Code Online (Sandbox Code Playgroud)
但是,我只想突出显示无效的输入。即,不要以绿色突出显示有效输入。而不是为此覆盖引导程序样式,我想我会尝试:valid从有效输入中删除伪类。但是,我找不到任何人这样做的例子。我在 SO 上查看的问题只是通过 CSS 更改样式。
我认为这样的事情可能会奏效,
eventCreationForm.find(":valid").removeClass(":valid");但我想它不会,因为它不是真正的课程。
下面的例子有一个调用堆栈错误,但这只是这个例子。
let eventCreationForm = $(".event-creation-form");
if (!eventCreationForm[0].checkValidity()) {
eventCreationForm.find(":submit").click();
}
Run Code Online (Sandbox Code Playgroud)
$(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();
}
})
})Run Code Online (Sandbox Code Playgroud)