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

256

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

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

Matt
источник
1
Если вы заинтересованы в любом уровне совместимости между браузерами, вам, вероятно, придется использовать JavaScript. Атрибут вы хотите selectedIndex.
Люк Снерингер
4
Согласно текущему редактору проекта спецификации HTML5 (6 августа 2011 г.), элемент select имеет обязательный атрибут. «Обязательный атрибут - логический атрибут. Когда он указан, пользователь должен будет выбрать значение перед отправкой формы». dev.w3.org/html5/spec/Overview.html#the-select-element
james.garriss

Ответы:

471

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

Предварительные условия : правильный 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.

mplungjan
источник
27
Кроме того, чтобы пользователь не мог выбрать неопцию после ее выбора: <option selected = "selected" disabled = "disabled" value = ""> Пожалуйста, выберите </ option>
CoolAJ86
2
Это не имеет смысла ... Также это не будет работать на нескольких браузерах
mplungjan
4
@ CoolAJ86 Хорошо работает в Chrome 23, Firefox 16 и IE 10.
KTB
15
Я вижу 2 снижения. Если вы хотите понизить голосование, ПОЖАЛУЙСТА, прокомментируйте ПОЧЕМУ
mplungjan
1
Перефразирование документации очень полезно; спасибо
skia.heliou
13

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

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

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

Пол Д. Уэйт
источник
8
Я уверен, что ему просто нужно было значение = "" в первой записи - если нет атрибута значения или значения во всех опциях, требуемый сбой не запускается, потому что
выборка
1
@mplungjan: ах , Гоча - хорошо заметный .
Пол Д. Уэйт
1
@ PaulD.Waite Можем ли мы до сих пор не гарантировать, что у пользователей будет включен Javascript? Я занимаюсь веб-разработкой всего 2 года и никогда не сталкивался с этой проблемой.
user137717
2
@ user137717: это Интернет. Вы не можете ничего гарантировать. Вы можете, конечно, решить, что это не стоит обслуживать.
Пол Д. Уэйт
5

Вы можете использовать selectedатрибут для элемента option, чтобы выбрать вариант по умолчанию. Вы можете использовать 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>
james.garriss
источник
1
@Apostle - Пожалуйста, перестаньте пытаться изменить этот ответ с помощью правок. Если вы считаете, что это неправильно, не стесняйтесь оставлять свой ответ.
Брэд Ларсон
@BradLarson Сначала я не совсем понял: код не является полным решением проблемы в этом вопросе или является пояснительным примером к последнему абзацу этого ответа. Вероятно, второй в этом случае. Я думаю, что лучше организовать этот код как фрагмент и показать результат -1. Извините, я не уточнил в комментариях в первую очередь.
Апостол
5

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

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

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

pradipgarala
источник
1
<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>
yatou
источник
3
Этот ответ просто повторяет предыдущий пример без дополнительного объяснения.
james.garriss
1

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

Ayush
источник
0

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

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

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>
Сантош Девнат
источник
0

Вам необходимо установить 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

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

пример

JBallin
источник
0

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

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

Прекрасно работает, если значение первого параметра равно нулю. Объяснение: HTML5 будет читать нулевое значение при нажатии кнопки. Если не ноль (атрибут value), предполагается, что выбранное значение не равно null, следовательно, проверка работала бы, т. Е. Проверяя наличие данных в теге option. Поэтому он не будет производить метод проверки. Тем не менее, я думаю, что другая сторона станет понятной, если атрибут value установлен в null, т. Е. (Value = ""), HTML5 обнаружит пустое значение в первой или, скорее, выбранной по умолчанию опции, выдавая сообщение проверки. Спасибо за вопрос. Рад был помочь. Рад знать, если я сделал.

Кудзай Мачиридза
источник
-1

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

<select required="required">

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

Роджер Рокко
источник
-4

Попробуй это

<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>
user2289459
источник
-6

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

Установить требуется

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

Удалить обязательно

$("#select1").removeAttr('required');
mlqmarkos12
источник