相关疑难解决方法(0)

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

我有一个包含多个部分的表单。每个部分都使用 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)

javascript validation bootstrap-4

5
推荐指数
1
解决办法
2080
查看次数

标签 统计

bootstrap-4 ×1

javascript ×1

validation ×1