I'm currently tackling a project involving HTML forms and utilizing Bootstrap for form validation. However, I've encountered an issue. After adding a select menu to the form and testing the form validation, I noticed that the other input fields displayed the validation styles on the select menu in Firefox only, not in Chrome or Edge. You can see the screenshots below:
Firefox:
https://i.sstatic.net/dLatv.png
Chrome:
https://i.sstatic.net/dllaW.png
The images clearly illustrate that the select menu validation only functions properly in Firefox but not in Chrome. Below is a snippet of the code: (Try running the snippet in 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>Therefore, my inquiries are:
- Is there a way to make Bootstrap select validation function for Chrome as well?
- Am I overlooking something here?