【问题标题】:Make the <select> Field Required? [duplicate]使 <select> 字段为必填? [复制]
【发布时间】:2012-12-30 11:26:49
【问题描述】:

可能重复:
Can I apply the required attribute to <select> fields in HTML5?

我正在使用来自 here 的 html5 联系表单,但我在尝试将 &lt;select&gt; 字段设为必填时遇到问题。其他一切都很好,只是遇到了麻烦,当我询问该领域时,开发人员没有回应。这就是我所拥有的

 <select name="package" id="package" title="Please choose a package" class="required">
    <option value="">------------------</option>
    <option value="basic">Basic</option>
    <option value="plus">Plus</option>
    <option value="premium">Premium</option>
</select>

为了让它正常工作,我缺少什么?

【问题讨论】:

  • 用javascript很容易
  • 你用的是什么浏览器?
  • 能否提供 CSS,有兴趣看看“必需”样式中的内容。另外,您是否使用任何 javascript 验证,如果没有,您可以使用简单的 javascript 验证 - if(package.selectedIndex

标签: javascript jquery ajax html


【解决方案1】:

如果你有更好的浏览器,你可以试试这个(比如this线程):

<select required>
  <option value=""></option>
  <option value="basic">Basic</option>
  <option value="plus">Plus</option>
  <option value="premium">Premium</option>
</select>

,但您仍然应该使用 JavaScript,因为没有多少人拥有支持 HTML5 required 属性的浏览器。 IE 和 Safari 不支持。

【讨论】:

  • 如果您输入aria-required="true",它将在 Safari 上运行,除了网页端必须在服务器端检查该字段是否已设置,因此在 JS 中检查它只是一个品味问题。我个人认为使用ie的用户应该责备自己:)
【解决方案2】:

检查这个:http://www.w3.org/TR/html-markup/select.html

全局属性 全局允许的任何属性。

  1. 名称 = 字符串

    与此元素关联的名称/值对的名称部分,用于提交表单。

  2. disabled = "disabled" or "" (空字符串) or empty

    指定该元素代表一个禁用的控件。

  3. form = ID 参考新

    与元素关联的表单上的 id 属性的值。

  4. 大小 = 正整数

    向用户显示的选项数量。

  5. multiple = "multiple" or "" (空字符串) or empty

    如果存在,则表明其选择元素表示用于从选项列表中选择零个或多个选项的控件。 如果不存在,则表示其 select 元素表示用于从选项列表中选择单个选项的控件。

  6. autofocus = "autofocus" or "" (空字符串) or empty

    指定该元素表示一个控件,一旦加载文档,UA 将为其提供焦点。

  7. required = "required" or ""(空字符串)或空

    指定该元素是表单提交的必需部分。

所以你需要一个required = "required" 属性到你的&lt;select&gt;

【讨论】:

    【解决方案3】:

    我相信this question 的最佳答案是您正在寻找的。 引用,

    这对我有用 - 将第一个值设为空 - 要求对空值有效。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2023-04-01
      • 2016-05-04
      • 2016-06-12
      • 2020-11-22
      • 2023-03-11
      • 1970-01-01
      • 1970-01-01
      • 2010-11-27
      相关资源
      最近更新 更多