如何为注册表单中的生日select元素添加HTML必填验证？

要解决生日选项无法触发验证的问题，只需给每个生日对应的<select>标签添加required属性，浏览器就会自动强制用户选择有效选项后才能提交表单。

修改后的代码示例： #

<label for="select-choice">Birthday:</label>
<select name="select-choice" id="select-choice" required>
  <option value="0" selected disabled>Month</option>
  <option value="january">Jan</option>
  <option value="february">Feb</option>
  <option value="march">Mar</option>
</select>

<select name="birthday-day" id="day" required>
  <option value="0" selected disabled>Day</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<select name="birthday-year" id="year" required>
  <option value="0" selected disabled>Year</option>
  <option value="2015">2015</option>
  <option value="2014">2014</option>
  <option value="2013">2013</option>
  <option value="2012">2012</option>
  <option value="2011">2011</option>
</select>

原理说明： #

• required是HTML5原生的表单验证属性，添加到<select>元素后，会要求用户必须选择一个非禁用的选项。
• 你设置的默认选项（如"Month""Day""Year"）已经标记为disabled，用户无法在提交表单时保持选中该选项，必须选择下方的有效选项，否则浏览器会阻止表单提交，并弹出提示引导用户完善信息。

内容的提问来源于stack exchange，提问作者Ikechukwu Kelechi Alexander