如何为单选按钮创建类似于所需警报的 HTML5？

Question

对于输入类型文本，如果我添加必填属性，我的表单将不会提交，浏览器将专注于必填字段，并且警报会说请填写此字段。 对于输入类型收音机，如果我添加所需的属性，我的表单将不会提交，但它也不会向我提供任何警报或关注未选中的收音机。 如果这不是 HTML5 的内置功能，我是否可以通过某种方式创建它并使其看起来与查找文本输入时相同，以便保留样式完整性？

Answer 1

此代码运行良好，如果您不选择单选，表单将不会提交。如果您选择一个并在文本框中输入文本，表单将提交。

<form>
    <input type="radio" name="one" value="1" required>
    <input type="radio" name="one" value="2" required>
    <input type="radio" name="one" value="3" required>
    <input type="text" name="two" required>
    <button>Submit</button>
<form>

检查了最新版本的谷歌浏览器。 可能是您在浏览器中发现了一个错误，请尝试更新它。

Answer 2

除了required 单选按钮警报在 Chrome 中工作“非常好”...

jsBin demo

为单选按钮设置警报完全没有意义，这很愚蠢。
如果您有单选按钮：

1. 绝对没有必要只有一个单选按钮。 → 使用复选框。
2. 绝对没有理由一开始就取消选中所有单选按钮。
3. 默认情况下必须选中一个 - 这是你的工作
4. 从逻辑上讲，无需弹出“需要此单选按钮”之类的警报 - 因此，也无需将 required 属性设置为单选按钮。

如果您仍然不明白为什么...很简单，因为无线电被用作 UI 切换状态。只有一个可以而且必须是checked。如果您一开始就没有检查它们 - 并且客户无意中击中了收音机 - 他已经死在魔鬼的循环中，因为一旦您进入圈子，就没有出路。因此，首先将所有 空白 放在首位是没有意义的。您无法撤消...（好吧，除非您有另一个愚蠢的复选框或者说“取消选中所有单选按钮！”废话）。