我可以将所需的属性应用到<HTML5中的字段?

如何检查用户是否从HTML5中的<select>字段中选择了一些东西?

我看到<select>不支持新的required属性…我必须使用JavaScript吗?还是我遗漏了什么?：/

285204 次浏览
小开
最佳答案

强制性的:将第一个值设为空——要求对空值进行操作

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

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

根据的文档(列表和粗体是我的)

必选属性为布尔值 属性。< br > 指定时，表示用户 将需要选择一个值

如果一个选择元素

  • 具有指定的必需属性，
  • 没有指定多个属性，
  • 并且显示大小为1(不要有size =2或更多-如果不需要省略它);
  • 和if值 中的第一个选项元素的 选择元素的选项列表(如果 any)是空字符串(即存在为value="")，
    • . any) <李> 选项元素的父节点是 选择元素(而不是optgroup) 元素),< / >

那么这个选项就是 选择元素的占位符标签 选择。< / p >

小开

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

  • < a href = " http://dev.w3.org/html5/spec-author-view/the-select-element.html select元素" > http://dev.w3.org/html5/spec-author-view/the-select-element.html select元素< / >

哪个浏览器不支持这个功能?

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

小开

默认情况下，你可以使用option元素的selected属性来选择一个选项。你可以使用select元素的required属性来确保用户选择了一些东西。

在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>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>
小开

你也可以用JQuery动态地做到这一点

设置所需的

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

删除需要

$("#select1").removeAttr('required');
小开 
<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>
小开

在html5中，你可以使用完整的表达式:

<select required="required">
我不知道为什么简短的表达不管用，但是试试这个。

小开

是的，它正在工作:

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

你得把第一选项空着。

小开

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

所以当你发布表单时，你会得到空白值，使用这种方式，你会知道用户没有从下拉菜单中选择任何东西。

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

首先，你必须在第一个选项中分配空白值。 选择这里。

小开

你需要将option的value属性设置为空字符串:

<select name="status" required>
<option selected disabled value="">what's your status?</option>
<option value="code">coding</option>
<option value="sleep">sleeping</option>
</select>

当用户按下form上的submit时，select将所选option的value返回给服务器。空的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属性)，则假定所选值不是null，因此验证将正常工作，即检查选项标签中是否有数据。因此它不会产生验证方法。然而，我猜另一边变得清晰，如果value属性被设置为null ie (value = "")， HTML5将在第一个或更确切地说是默认选择选项上检测到一个空值，从而给出验证消息。谢谢关心。很乐意帮忙。很高兴知道我是否知道。


提交答案