J. Sm J. Sm - 1 month ago 13
CSS Question

Bootstrap dropdown required in Chrome is not working with empty value

I'm currently using a dropdown menu which requires to choose a country from the list. The thing is the code is working as intended in FF (2nd option which is an empty value does NOT mean that required step is done) while chrome just ignores the problem and thinks the empty value is OK.

Here is the code:

<select class="form-control" name="Country" required>
<option selected value="">Choose Your Country</option>
<option value=""></option>
<option value="country1">Country1</option>
<option value="country2">Country2</option>
etc


Any ideas what is the problem here? Thanks!

Answer

Isn't your empty value="" supposed to be on the default label (Choose Your Country)?

<select class="form-control" name="Country" required> <option value="">Choose Your Country</option> <option disabled value=""></option> <option value="country1">Country1</option> <option value="country2">Country2</option> </select>