如何正确设置自定义引导程序表单验证的样式答案

【问题标题】：How to properly style custom bootstrap form validation如何正确设置自定义引导程序表单验证的样式
【发布时间】：2022-11-18 15:18:14
【问题描述】：

我已经为引导程序表单验证器创建了自定义验证检查（这是下面的其他部分）：

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)
})

目标输入字段已经具有可以正常工作的“必需”属性。

使用上面的代码，我设法使验证错误消息出现并停止表单提交，但该字段的轮廓是绿色而不是红色。

看来我的元素最终都是已验证和是无效的由于“必需”验证的类。

我在另一篇文章中读到，有一个 updateStatus 函数可以将字段设置为无效。看来这就是我所需要的，但我还没有弄清楚如何通过我的表单元素访问它。

任何帮助将不胜感激，我是 javascript 的菜鸟：\

【问题讨论】：

标签： javascript bootstrapvalidator

【解决方案1】：

我很确定这不是最佳解决方案，但我设法得到了我想要的：

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

【讨论】：