自定义 html5 验证 select

Question

I have a element select like this:

<select name="select">
<option value="opt1">Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>

and I want user to select a option eg opt2, opt3... but opt1, how to to use html 5 validation to valid the select?

Answer 1

You can do something like the following:

 <select name="select"> <option value="opt1" selected disabled>Select One Value Only</option> <option value="opt2">Type 2</option> <option value="opt3">Type 3</option> </select>

In the snippet above, the opt1 is selected by default. The user can only select opt2 or opt3 , but once they do that then they cannot selecte opt1 , hope this is the behaviour you're looking for.

Answer 2

I think the only way to add the validation here is to set the default option value to an empty string and add required attribute to select element. Now you can click on submit button to see the validation:

 <form> <label >Choose an option:</label> <select name="select" required> <option value="" disabled selected>Select One Value Only</option> <option value="opt2">Type 2</option> <option value="opt3">Type 3</option> </select> <input type="submit"> </form>

The issue here is that when you set a value to the default option to something other than empty string the validation infers it as a valid value has been already selected, thus the validation is not triggered at that point.

Answer 3

Try Using:

<select name="select" required>
  <option value="opt1" selected="selected" disabled>Select One Value Only</option>
  <option value="opt2">Type 2</option>
  <option value="opt3">Type 3</option>
</select>