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

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

242 голосов
/ 18 мая 2011

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

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

Ответы [ 12 ]

448 голосов
/ 18 мая 2011

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

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

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

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

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

Если для элемента выбора

  • указан обязательный атрибут,
  • не имеет указанного множества атрибутов,
  • и имеет размер дисплея 1 (не иметь SIZE = 2 или более - пропустите его, если не нужно);
  • и если значением первого элемента option в списке опций элемента select (если есть) является пустая строка (т.е. представлена ​​как value=""),
  • и родительский узел этого элемента option является элементом select (а не элементом optgroup),

тогда эта опция является опцией метки-заполнителя элемента select.

13 голосов
/ 18 мая 2011

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

Какой браузер не поддерживает это?

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

5 голосов
/ 09 августа 2011

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

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

Согласно спецификации HTML5, selectedIndex "возвращает индекс первого выбранного элемента, если таковой имеется, или -1, если нет выбранного элемента. И value" возвращает значение первого выбранного элемента, если any, или пустая строка, если нет выделенного элемента. "Так что, если 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>
3 голосов
/ 01 мая 2016

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

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

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

1 голос
/ 17 июля 2017

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

0 голосов
/ 16 марта 2018

попробуйте это, это сработает, я пробовал это, и это работает. 

<!DOCTYPE html>
<html>
<body>

<form action="#">
<select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>

</body>
</html>
0 голосов
/ 12 января 2018

Вам необходимо установить атрибут value для option в пустую строку: 

<select name="status" required>
    <option selected disabled value="">what's your status?</option>
    <option value="code">coding</option>
    <option value="sleep">sleeping</option>
</select>

select вернет value выбранного option на сервер, когдапользователь нажимает submit на form.Пустой value - это то же самое, что и пустой text вход -> повышение required сообщения.

w3schools

* 1021Атрибут value указывает значение, которое будет отправлено на сервер при отправке формы.

Пример

0 голосов
/ 22 июля 2016

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

Поэтому, когда вы публикуете ФОРМУ, вы получаете пустое значение и, используя этот способ, вы знаете, что пользователь ничего не выбрал из выпадающего списка. 

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>
0 голосов
/ 11 января 2016

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

<select required="required">

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

0 голосов
/ 22 июля 2014 
<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>
Страница:
...