Remove：使用javascript从输入中删除有效的伪类

我有一个包含多个部分的表单。使用Bootstrap 4验证手动验证每个部分（不提交表单进行实际验证）。这与下面的代码配合得很好

let eventCreationForm = $(".event-creation-form");
if (!eventCreationForm[0].checkValidity()) {
    eventCreationForm.find(":submit").click();
}

但是，我只想突出显示无效的输入。即，不要以绿色突出显示有效输入。我想我应该尝试从有效输入中删除

：valid

伪类，而不是为此覆盖引导样式。然而，我找不到任何人这样做的例子。这些问题我已经看过了，所以只要通过CSS更改样式就可以了

我想这样可能行得通，

eventCreationForm.find（“：valid”）.removeClass（“：valid”）
下面的示例有一个callstack错误，但这只是这个示例


$（文档）.ready（函数（）{
var forms=document.getElementsByClassName（'needs-validation'）；
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
}，假）；
});
$（“.manual submit”）。单击（函数（）{
让eventCreationForm=$（“.event creation form”）；
如果（！eventCreationForm[0].checkValidity（））{
eventCreationForm.find（“：submit”）。单击（）；
}
})
})

名字
看起来不错！
用户名
@
请选择一个用户名。
提交表格
据我所知，您根本无法摆脱
:valid
伪类

然而，这里的问题不是那些伪类。如果
已验证
类未添加到表单中，只要您在适当的情况下手动添加
无效
类，引导程序4将按照问题中的要求运行

根据：

作为回退，.is无效，.is有效类可以代替伪类用于服务器端验证。它们不需要.was验证的父类

（我的重点。）

您看到设置样式的
：valid
和
：invalid
伪类的原因是父级上的
已验证
类：

引导将：无效和：有效样式作用于父级。已验证的类，通常应用于。否则，任何没有值的必填字段在页面加载时显示为无效。这样，您可以选择何时激活它们（通常在尝试提交表单之后）

在这种情况下，难道就没有大纲吗？我想让红色的无效的隐藏绿色的。我已经做了一个编辑来澄清。
有效
且
无效
类不需要使用
已验证
。事实上，
被验证了
是
：valid
和
：invalid
被样式化的原因。当然，您需要使用
是有效的
和
是无效的
类。您可以将
无效
类同步到
：无效
伪类。