使用 Javascript 从输入中删除 :valid 伪类答案

【问题标题】：Remove :valid pseudo class from inputs with Javsacript使用 Javascript 从输入中删除 :valid 伪类
【发布时间】：2019-08-24 20:40:33
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript validation bootstrap-4

【解决方案1】：

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

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

根据Bootstrap 4 documentation：

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

（强调我的。）

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

Bootstrap 将 :invalid 和 :valid 样式限定为父 .was-validated 类，通常应用于

。否则，任何没有值的必填字段在页面加载时显示为无效。这样，您可以选择何时激活它们（通常在尝试提交表单之后）。

【讨论】：

在那种情况下，岂不是根本就没有大纲了？我想保留红色无效的隐藏绿色的。
我已经进行了编辑以澄清。 is-valid 和 is-invalid 类不需要使用 was-validated。事实上，was-validated 是 :valid 和 :invalid 被样式化的原因。当然，您需要使用is-valid 和is-invalid 类。您可以将is-invalid 类同步到:invalid 伪类。

【解决方案2】：

您实际上可以在 JavaScript 中使用 setCustomValidity() 间接切换 :valid 和 :invalid 伪类。

来自Bootstrap 4 documentation（也适用于 Bootstrap 5）：

您可以在 JavaScript 中使用 setCustomValidity 提供自定义有效性消息。

要添加 :invalid 并删除 :valid，请使用：

var error = "An invalid input message.";
this.setCustomValidity(error);

要添加 :valid 并删除 :invalid，请使用：

this.setCustomValidity("");

您还可以通过操作相应元素中的文本来添加、删除或更改错误消息。

【讨论】：