Javascript 我可以将 required 属性应用到 HTML5 中的 <select> 字段吗？

Can I apply the required attribute to <select> fields in HTML5?

提问by Matt

How can I check if a user has selected something from a <select>field in HTML5?

如何检查用户是否从<select>HTML5的字段中选择了某些内容？

I see <select>doesn't support the new requiredattribute... do I have to use JavaScript then? Or is there something I'm missing? :/

我看到<select>不支持新required属性...那我必须使用 JavaScript 吗？或者有什么我想念的吗？：/

回答by mplungjan

Mandatory: Have the first value empty - required works on empty values

强制：将第一个值设为空 - 需要对空值进行处理

Prerequisites: correct html5 DOCTYPE and a named input field

先决条件：正确的 html5 DOCTYPE 和命名输入字段

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

As per the documentation(the listing and bold is mine)

根据文档（列表和粗体是我的）

The required attribute is a boolean attribute.
When specified, the user will be required to select a value before submitting the form.

If a select element

• has a required attribute specified,
• does not have a multiple attribute specified,
• and has a display size of 1 (do not have SIZE=2 or more - omit it if not needed);
• and if the value of the first option element in the select element's list of options (if any) is the empty string(i.e. present as value=""),
• and that option element's parent node is the select element (and not an optgroup element),

then that option is the select element's placeholder label option.

必需的属性是一个布尔属性。
指定后，用户将需要在提交表单之前选择一个值。

如果一个选择元素

• 指定了必需的属性，
• 没有指定多个属性，
• 并且显示大小为 1（不要有 SIZE=2 或更多 - 如果不需要，请省略它）；
• 如果 select 元素的选项列表（如果有）中第一个 option 元素的值是空字符串（即作为value=""），
• 并且那个 option 元素的父节点是 select 元素（而不是 optgroup 元素），

那么该选项是选择元素的占位符标签选项。

回答by Paul D. Waite

The <select>element does support the requiredattribute, as per the spec:

根据规范，该<select>元素确实支持该required属性：

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

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

Which browser doesn't honour this?

哪个浏览器不尊重这一点？

(Of course, you have to validate on the server anyway, as you can't guarantee that users will have JavaScript enabled.)

（当然，无论如何您都必须在服务器上进行验证，因为您不能保证用户将启用 JavaScript。）

回答by james.garriss

You can use the selectedattribute for the option element to select a choice by default. You can use the requiredattribute for the select element to ensure that the user selects something.

selected默认情况下，您可以使用option 元素的属性来选择一个选项。您可以使用requiredselect 元素的属性来确保用户选择某些内容。

In Javascript, you can check the selectedIndexproperty to get the index of the selected option, or you can check the valueproperty to get the value of the selected option.

在Javascript中，您可以通过检查selectedIndex属性来获取所选选项的索引，也可以通过检查value属性来获取所选选项的值。

According to the HTML5 spec, selectedIndex"returns the index of the first selected item, if any, or ?1 if there is no selected item. And value"returns the value of the first selected item, if any, or the empty string if there is no selected item." So if selectedIndex = -1, then you know they haven't selected anything.

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

回答by pradipgarala

Yes, it's working:

是的，它正在工作：

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

you have to keep first option blank.

您必须将第一个选项保留为空白。

回答by yatou

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

回答by ayush

first you have to assign blank value in first option. i.e. Select here.than only required will work.

首先，您必须在第一个选项中分配空白值。即在此处选择。仅需要即可。

回答by JBallin

You need to set the valueattribute of optionto the empty string:

您需要将 的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>

selectwill return the valueof the selected optionto the server when the user presses submiton the form. An empty valueis the same as an empty textinput -> raising the requiredmessage.

select将返回value所选的option服务器当用户按下submit上form。空value与空text输入相同-> 引发required消息。

---

---

w3schools

w3schools

The value attribute specifies the value to be sent to a server when a form is submitted.

Example

value 属性指定提交表单时要发送到服务器的值。

例子

回答by sayyed tabrez

try this, this gonna work, I have tried this and this works.

试试这个，这行得通，我试过这个，这行得通。

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

回答by Kudzai Machiridza

Works perfectly fine if the first option's value is null. Explanation : The HTML5 will read a null value on button submit. If not null (value attribute), the selected value is assumed not to be null hence the validation would have worked i.e by checking if there's been data in the option tag. Therefore it will not produce the validation method. However, i guess the other side becomes clear, if the value attribute is set to null ie (value = "" ), HTML5 will detect an empty value on the first or rather the default selected option thus giving out the validation message. Thanks for asking. Happy to help. Glad to know if i did.

如果第一个选项的值为空，则工作得很好。说明：HTML5 将在按钮提交时读取空值。如果不为空（值属性），则假定所选值不为空，因此验证将起作用，即通过检查选项标签中是否存在数据。因此它不会产生验证方法。但是，我想另一边变得清楚了，如果 value 属性设置为 null，即 (value = "" )，HTML5 将检测第一个或默认选定选项上的空值，从而发出验证消息。谢谢你的提问。乐于帮助。很高兴知道我是否这样做了。

回答by santosh devnath

Make the value of first item of selection box to blank.

将选择框第一项的值设为空白。

So when every you post the FORM you get blank value and using this way you would know that user hasn't selected anything from dropdown.

因此，当您每次发布表单时，您都会获得空白值，并且使用这种方式您会知道用户没有从下拉列表中选择任何内容。

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