引导选择菜单验证在Firefox中有效，但在chrome中不可用

Question

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

Firefox：

Chrome：

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

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