Чи можна застосувати необхідний атрибут до полів <select> у HTML5?

Як я можу перевірити, чи користувач вибрав щось із <select>поля в HTML5?

Я бачу <select>, не підтримує новий requiredатрибут ... чи потрібно тоді використовувати JavaScript? Або щось мені не вистачає? : /

Обов’язково : перше значення залиште порожнім - обов'язкові роботи над порожніми значеннями

Необхідні умови : виправте DOCTYPE html5 та назване поле введення

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

Відповідно до документації (перелік та жирний шрифт - мій)

Необхідний атрибут - булевий атрибут.
Якщо зазначено, користувачеві потрібно буде вибрати значення, перш ніж надсилати форму.

Якщо елемент вибору

• вказаний обов'язковий атрибут,
• не вказано кілька атрибутів,
• і має розмір дисплея 1 (не розмір SIZE = 2 і більше - опустіть його, якщо не потрібно);
• і якщо значенням першого елемента параметра у списку параметрів вибору елемента (якщо він є) є порожній рядок (тобто присутній як value=""),
• і батьківський вузол елемента цього елемента є елементом вибору (а не елементом optgroup),

тоді ця опція є опцією мітки-заповнювача елемента вибору.

<select>Елемент дійсно підтримує requiredатрибут, відповідно зі специфікацією:

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

Який браузер не шанує цього?

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

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

У Javascript ви можете перевірити selectedIndexвластивість, щоб отримати індекс вибраної опції, або ви можете перевірити valueвластивість, щоб отримати значення вибраного параметра.

Відповідно до специфікації HTML5, selectedIndex"повертає індекс першого вибраного елемента, якщо такий є, або -1, якщо немає вибраного елемента. І value" повертає значення першого вибраного елемента, якщо такий є, або порожній рядок, якщо такий є немає вибраного елемента. "Отже, якщо вибраноIndex = -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 прочитає нульове значення під час подання кнопки. Якщо не null (атрибут value), вважається, що вибране значення не є нульовим, отже, перевірка спрацювала б, тобто перевіряючи, чи були дані в тегу параметрів. Тому він не випустить метод перевірки. Однак я думаю, що інша сторона стає зрозумілою, якщо атрибут значення встановлений на нуль, тобто (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');