Можно ли применить требуемый атрибут к полям <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');