使用 Javsacript 从输入中删除 :valid 伪类

Question

我有一个包含多个部分的表单。每个部分都使用 Bootstrap 4 验证手动验证（无需提交真实表单）。这适用于下面的代码；

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

但是，我只想突出显示无效的输入。即，不要以绿色突出显示有效输入。而不是为此覆盖引导程序样式，我想我会尝试:valid从有效输入中删除伪类。但是，我找不到任何人这样做的例子。我在 SO 上查看的问题只是通过 CSS 更改样式。

我认为这样的事情可能会奏效， eventCreationForm.find(":valid").removeClass(":valid");但我想它不会，因为它不是真正的课程。

下面的例子有一个调用堆栈错误，但这只是这个例子。

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

$(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();
      }
    })
  })

Answer 1

:valid据我所知，你根本无法摆脱伪类。

然而，这里的问题不是那些伪类。was-validated当类未添加到表单中时，Bootstrap 4 将按照问题中的要求运行，只要您is-invalid在适当的位置手动添加类即可。

根据Bootstrap 4 文档：

作为后备方案，可以使用 .is-invalid 和 .is-valid 类代替伪类进行服务器端验证。它们不需要 .was-validated 父类。

（强调我的。）

:valid您看到和伪类样式的原因:invalid是因为was-validated父类上的类：

Bootstrap 将 :invalid 和 :valid 样式的范围限定为父 .was-validated 类，通常应用于 <form>。否则，任何没有值的必填字段在页面加载时都会显示为无效。这样，您可以选择何时激活它们（通常在尝试提交表单后）。