Как проверить, что пользователь выбрал что-то из поля <select>
в HTML5?
Я вижу, что <select>
не поддерживает новый атрибут required
... должен ли я использовать JavaScript? Или там что-то не хватает?:/
Как проверить, что пользователь выбрал что-то из поля <select>
в HTML5?
Я вижу, что <select>
не поддерживает новый атрибут required
... должен ли я использовать JavaScript? Или там что-то не хватает?:/
Обязательный: иметь первое значение пустым - требуется выполнение пустых значений
Предпосылки: исправьте 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 элемент),
то этот параметр является выбрать ярлык элемента-заполнителя вариант.
Элемент <select>
поддерживает атрибут required
, согласно спецификации:
Какой браузер не соблюдает это?
(Конечно, вам все равно нужно проверять на сервере, поскольку вы не можете гарантировать, что у пользователей будет включен 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>
вам нужно оставить первый вариант пустым.
<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>
В html5 вы можете использовать полное выражение:
<select required="required">
Я не знаю, почему короткое выражение не работает, но попробуйте это. Это решит.
сначала вам нужно назначить пустое значение в первом варианте. т.е. выберите здесь. Требуется только требуемое.
Сделать значение первого элемента поля выбора пустым.
Итак, когда вы публикуете 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');