how to make required select statement even with disabled, selected option

Question

<form action="/xyz.jsp">
<select required>
  <option selected disabled hidden>Select one of your active items...</option>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>

The issue here is, when I specify require it does not act properly because the first field is selected.. it ends up producing NULL instead of actually requiring user to enter a choice...

Anything I can do to fix this?

Answer 1

It is because you have to make the first option value the empty string. You will have to come with another value for your "none" option.

See also Can I apply the required attribute to <select> fields in HTML5?

This is pure HTML.

<form action="/xyz.jsp">
<select required>
  <option value="" selected hidden>Select one of your active items...</option>
  <option value="none">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>