在隐藏的收音机上显示 HTML5 表单验证错误消息答案

【问题标题】：Display HTML5 form validation error message on hidden radio在隐藏的收音机上显示 HTML5 表单验证错误消息
【发布时间】：2021-04-25 23:07:18
【问题描述】：

我使用需要通过 HTML5 表单验证来验证的自定义单选按钮。每个选项都有 required 属性。一旦用户单击表单提交按钮，CSS :invalid 选择器应该将覆盖按钮的 span 的边框涂成红色。不幸的是，页面加载时边框被着色，提交按钮甚至没有被点击。有什么想法吗？

input[type="radio"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

label input[type="radio"]:checked+.form-btn-radio {
  background-color: blue;
  text-decoration: none;
  color: white;
  border: 2px solid blue;
}

label input[type="radio"]:invalid+.form-btn-radio {
  border: 2px solid red;
}

.form-btn-radio {
  border: 2px solid black;
  color: black;
  padding: 10px 25px 10px 25px;
  min-width: 60px;
  background-color: white;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}

<label for="apply">
<input type="radio" id="apply" name="apply" value="easy" required>
<div class="form-btn-radio">Option 1 Name</div>
</label>

<label for="apply-external">
<input type="radio" id="apply" name="apply" value="url" required>
<div class="form-btn-radio">Option 2 Name</div>
</label>

【问题讨论】：

我很确定 HTML 会自动制作红色边框，你不需要这样做
@Rojo 是的，如果它是标准收音机的话。请注意，此处收音机通过不透明度隐藏并由 div 覆盖。 HTML 不会改变 div 的边框。此外，它不应该在单击提交按钮之前对其着色。
你最好的选择是使用 Javascript 或者只是处理它。
当然，JS 是后备解决方案。根据这个讨论，它应该是可能的：stackoverflow.com/questions/49687229/…
我没有看到解决方案。它们都和你做的一样。 Firefox 84 Windows 10 结果和你一样

标签： html css

【解决方案1】：

发现问题：“如果需要组中的任何一个单选按钮，如果未选择组中的任何按钮，则将 :invalid 伪类应用于所有单选按钮。（分组单选按钮共享它们的 name 属性的值相同。)"

developer.mozilla.org/en-US/docs/Web/CSS/:invalid

因此，如果您不想预先选择其中一台收音机，那么 JS 是唯一的解决方案。

【讨论】：