Bootstrap表单自定义验证样式异常：输入框同时存在is-valid与is-invalid类

我为Bootstrap表单验证器编写了自定义验证逻辑（如下方else代码块所示）：

Array.prototype.slice.call(forms).forEach(function (form) {
    form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
        }
        else if (myConditionIsNotMet()) {
            form.querySelector("#myInputField").classList.add('is-invalid');
            event.preventDefault()
            event.stopPropagation()
        }
        form.classList.add('was-validated')
    }, false)
})

目标输入框已添加required属性，原生验证功能正常。使用上述代码后，我成功触发验证错误提示并阻止表单提交，但输入框边框显示为绿色而非预期的红色。经检查发现，由于required验证通过，目标元素同时存在is-valid和is-invalid类。我了解到有updateStatus函数可设置字段为无效状态，但不清楚如何通过表单元素调用该函数，恳请帮助（我是JavaScript新手）。

方法1：手动移除冲突状态类 #

因为Bootstrap的CSS中is-valid的样式优先级高于is-invalid，所以最简单的处理方式是在添加is-invalid前先移除is-valid类，避免样式冲突：

Array.prototype.slice.call(forms).forEach(function (form) {
    form.addEventListener('submit', function (event) {
        const myInput = form.querySelector("#myInputField");
        if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
        }
        else if (myConditionIsNotMet()) {
            // 先清除合法状态类，再添加错误状态类
            myInput.classList.remove('is-valid');
            myInput.classList.add('is-invalid');
            event.preventDefault()
            event.stopPropagation()
        }
        form.classList.add('was-validated')
    }, false)
})

方法2：使用Bootstrap Validation插件的updateStatus方法 #

如果你使用的是Bootstrap官方的Validation插件（而非原生HTML5验证），需要先初始化表单验证实例，再通过实例调用updateStatus来统一管理字段状态：

// 初始化Bootstrap表单验证插件
Array.prototype.slice.call(document.querySelectorAll('.needs-validation'))
  .forEach(function (form) {
    const validationInstance = new bootstrap.FormValidation(form);
    
    form.addEventListener('submit', function (event) {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }
      else if (myConditionIsNotMet()) {
        // 通过插件实例设置字段为无效状态
        validationInstance.updateStatus('myInputField', 'invalid', 'custom-condition-failed');
        event.preventDefault()
        event.stopPropagation()
      }
      // 触发插件的验证流程
      validationInstance.validate();
    }, false)
  })

注意：使用此方法需确保已引入Bootstrap Validation插件脚本，表单需添加needs-validation类。updateStatus第三个参数是错误消息标识，需在输入框对应的错误提示元素上添加data-bs-error-message="自定义错误提示内容"，或在插件配置中预定义错误消息。

关键说明 #

Bootstrap表单验证的样式规则中，is-valid与is-invalid同时存在时，is-valid会覆盖is-invalid的样式。手动移除冲突类适合原生验证结合自定义逻辑的轻量场景，而使用插件的updateStatus则更符合Bootstrap的组件规范，能自动处理状态类的增减，避免手动操作DOM的疏漏。

内容的提问来源于stack exchange，提问作者Yiorgos