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

Как проверить, что пользователь выбрал что-то из поля <select> в HTML5?

Я вижу, что <select> не поддерживает новый атрибут required... должен ли я использовать JavaScript? Или там что-то не хватает?:/

Ответ 1

Обязательный: иметь первое значение пустым - требуется выполнение пустых значений

Предпосылки: исправьте html5 DOCTYPE и именованное поле ввода

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

По документация (листинг и жирный шрифт принадлежит мне)

Требуемый атрибут - логическое атрибутов.
Когда указано, пользователь потребуется выбрать значение перед отправкой формы.

Если элемент select

  • имеет требуемый атрибут,
  • не имеет указанного множественного атрибута,
  • и имеет размер экрана 1 (не имеет SIZE = 2 или более - опустите его, если не нужно);
  • , и если значение первого элемента опции в выберите список элементов списка (если any) - это пустая строка,
  • и что элемент option parent node - это select element (а не optgroup элемент),

то этот параметр является выбрать ярлык элемента-заполнителя вариант.

Ответ 2

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

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

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

Ответ 3

Вы можете использовать атрибут 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>

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

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

<select required="required">

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

Ответ 7

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

Ответ 8

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

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

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

Ответ 9

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

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

Ответ 10

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

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

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

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

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