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

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

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

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

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

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

• http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element

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

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

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

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

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

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

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

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

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

Вам необходимо установить 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 указывает значение, которое будет отправлено на сервер при отправке формы.

пример

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

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

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

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

<select required="required">

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

Попробуй это

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

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

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

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

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

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