Можно ли применить обязательный атрибут к полям <select> в HTML5?

Элемент <select> поддерживает атрибут required, согласно спецификации:

• http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element

Какой браузер не соблюдает это?

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

Вы можете использовать атрибут selected для элемента выбора, чтобы выбрать выбор по умолчанию. Вы можете использовать атрибут required для элемента select, чтобы убедиться, что пользователь что-то выбрал.

В Javascript вы можете проверить свойство selectedIndex, чтобы получить индекс выбранного параметра, или вы можете проверить свойство value, чтобы получить значение выбранного параметра.

В соответствии с спецификацией HTML5 selectedIndex "возвращает индекс первого выбранного элемента, если он есть, или -1, если нет выбранного элемента. И value" возвращает значение первого выбранного элемента, если любая или пустая строка, если не выбран выбранный элемент. "Так что если selectedIndex = -1, то вы знаете, что они ничего не выбрали.

<button type="button" onclick="displaySelection()">What did I pick?</button>
<script>
    function displaySelection()
    {
        var mySelect = document.getElementById("someSelectElement");
        var mySelection = mySelect.selectedIndex;
        alert(mySelection);
    }
</script>

Да, он работает:

<select name="somename" required>
     <option value="">Please select</option>
     <option value="one">One</option>
</select>

вам нужно оставить первый вариант пустым.

сначала вам нужно назначить пустое значение в первом варианте. т.е. выберите здесь. Требуется только требуемое.

В html5 вы можете использовать полное выражение:

<select required="required">

Я не знаю, почему короткое выражение не работает, но попробуйте это. Это решит.

<form action="">

<select required>

  <option selected disabled value="">choose</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>
  <option value="green">green</option>
  <option value="grey">grey</option>

</select>
<input type="submit">
</form>

Сделать значение первого элемента поля выбора пустым.

Итак, когда вы публикуете FORM, вы получаете пустое значение и, используя этот способ, знаете, что пользователь ничего не выбрал из раскрывающегося списка.

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>

Попробуйте это

<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>

Вы можете сделать это также динамически с помощью JQuery

Установите требуемый

$("#select1").attr('required', 'required');

Удалить требуемый

$("#select1").removeAttr('required');