引导选择菜单验证在 Firefox 中工作但在 chrome 中不工作

Question

我正在做一个与 HTML 表单相关的项目。我正在使用引导程序来验证表单，但我可能遇到了问题。当我向表单添加选择菜单并测试表单验证时，其他输入字段仅在 Firefox 中显示选择菜单上的验证样式。不在镀铬或边缘。检查下面的屏幕截图：

火狐：

铬：

在图像中，它清楚地表明选择菜单验证仅适用于 Firefox，但不适用于 chrome。 下面我还提到了一段代码sn-p：（尝试在firefox中运行sn-p）

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
    <div class="row">
        <div class="col-lg-7 mx-auto mt-5">
            <form action="?" method="POST" class="was-validated" novalidate="">
                <div class="form-group">
                    <select name="mySelect" class="custom-select" required="">
                        <option disabled="" selected="" hidden="">Choose</option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                    </select>
                    <p class="invalid-feedback">You must choose an option</p>
                    <button type="submit" class="btn btn-primary mt-3">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

所以，我的问题是：

1. 有没有办法让引导选择验证也适用于 chrome？
2. 我这里有什么遗漏吗？

Answer 1

为显示错误添加value 属性。 chrome 检测 empty 字符串值并显示有效输入，为此在 chrome 中您需要使用 value 属性而不指定值。

请使用required 而不是required=''，required='' 没有问题，但required 是工业选择。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col-lg-7 mx-auto mt-5">
            <form action="?" method="POST" class="was-validated" novalidate>
                <div class="form-group">
                    <select name="mySelect" class="custom-select" required>
                        <option disabled selected hidden value>Choose</option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                    </select>
                    <p class="invalid-feedback">You must choose an option</p>
                    <button type="submit" class="btn btn-primary mt-3">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>