Выборочная проверка html5 для выбора

Question

У меня есть элемент, подобный этому:

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

, и я хочу, чтобы пользователь выбрал опцию, например, opt2, opt3 ... но opt1, как использовать проверку html 5 для проверки выбрать?

Answer 1

Я думаю, что единственный способ добавить здесь валидацию - установить значение параметра по умолчанию в пустую строку и добавить атрибут required в элемент select. Теперь вы можете нажать на кнопку отправить, чтобы увидеть подтверждение:

<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>

Проблема здесь заключается в том, что при установке значения по умолчанию для параметра, отличного от пустой строки, проверка выводит его, поскольку действительное значение уже выбрано, поэтому проверка не запускается в этот момент.

Answer 2

Попробуйте использовать:

<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>

Answer 3

Вы можете сделать что-то вроде следующего:

<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>

В приведенном выше фрагменте по умолчанию выбран opt1. Пользователь может выбрать только opt2 или opt3, но как только он это сделает, он не сможет выбрать opt1, надеюсь, именно такое поведение вы ищете.