javascript - 删除 :valid pseudo class from inputs with Javsacript

Question

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

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

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

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

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

$(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>

Answer 1

你无法摆脱 :valid据我所知，完全是伪类。

但是，这里的问题不在于那些伪类。当 was-validated 出现问题时，Bootstrap 4 将按照问题中的要求运行类不会添加到表单中，只要您手动添加 is-invalid在适当的地方上课。

根据 Bootstrap 4 documentation :

As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.

(强调我的。)

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

Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).