How do I make the "select one" option not go through when the user clicks submit on the select tag?

Question

On my form, I'm trying to make the select box display the standard "select one" option so the user can click on it and pick among the 3 options I've made. I want this part of the form to be required while also not allowing the default option to go through. Any help in making the first option not work would be appreciated! Thank you!

<option selected="selected">Select one</option>

<option value="air">On the air</option>

<option value="web">On the web</option>

<option value="both">Both</option>

Answer 1

Just change

<select required>

     <option value="" selected>Select one</option>
     <option value="air">On the air</option>
     <option value="web">On the web</option>
     <option value="both">Both</option>


</select>

Users can never submit the default option.

Answer 2

You could have the Select one option be both selected and disabled, like this.

function validate(self) {
  console.log(self.value);
}

<select onchange="validate(this)" required>
  <option disabled selected>Select one</option>
  <option value="air">On the air</option>
  <option value="web">On the web</option>
  <option value="both">Both</option>
</select>

• The onchange event will trigger whenever a new value is chosen in the dropdown.
• The selected tag makes sure its the default option.
• The disabled tag makes sure it can't be chosen as an actual option.
• The required tag prevents the form from submitting if the dropdown value is still its default.

Answer 3

The "select one" text should really not be an option, but instead a label

<label>Select One:</label>

<select>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>