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

Question

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

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

Answer 1

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

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

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

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

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

Если выбранный элемент

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

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

Answer 2

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

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

Какой браузер этого не учитывает?

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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

Answer 7

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

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

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

Answer 8

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

---

w3школы

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

Пример

Answer 9

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

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

Answer 10

В html5 вы можете сделать это, используя полное выражение:

<select required="required">

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

Answer 11

Попробуй это

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

Answer 12

Вы также можете сделать это динамически с помощью jQuery

Требуемый набор

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

Удалить требуемое

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