如何为多个Likert量表radio输入标签添加required属性实现浏览器验证

这完全是HTML5原生表单验证的标准用法，不需要额外JS就能搞定浏览器端的必填校验，操作起来特别简单：

核心原理 #

对于共享同一个name属性的radio按钮组，你只需要给组内任意一个radio添加required布尔属性，浏览器就会自动识别这是一组必填选项，要求用户必须选中其中一个才能提交表单。

修改后的示例代码 #

<form>
  <ul>
    <li>
      <input type="radio" name="likert" value="1" required>
      <label>1 - 强烈不同意</label>
    </li>
    <li>
      <input type="radio" name="likert" value="2">
      <label>2</label>
    </li>
    <li>
      <input type="radio" name="likert" value="3">
      <label>3</label>
    </li>
    <li>
      <input type="radio" name="likert" value="4">
      <label>4</label>
    </li>
    <li>
      <input type="radio" name="likert" value="5">
      <label>5 - 完全同意</label>
    </li>
  </ul>
  <button type="submit">提交问卷</button>
</form>

关键细节提醒 #

• 所有radio的name属性必须完全一致（示例里是likert），这是浏览器判断“同组选项”的核心依据。
• required属性不用给每个radio都加，加在任意一个上面就生效——重复添加也没问题，但纯属多余。
• 验证效果：当用户没选任何选项就点提交时，浏览器会弹出内置提示框（不同浏览器样式略有差异），阻止表单提交，直到用户选中一个选项为止。

如果需要自定义验证提示文案，可以结合JavaScript的setCustomValidity()方法，但要是只需要基础的必填校验，原生required属性已经完全够用啦。

内容的提问来源于stack exchange，提问作者D21