单选按钮组 - setCustomValidity 和必需选项有冲突吗？

Question

我试图提出一种由单选按钮组组成的表单，用户必须选择其中一个选项，如果不选择，则会显示自定义有效性消息。

所以逻辑是：

1. 用户忘记选择一个选项并显示有效性消息。
2. 他返回并选择任何选项继续。

问题是，只有当所选选项是带有 onclick 事件的选项时，事情才会继续进行，如下所示。如果不是，则该消息将继续显示。

我尝试过处理 required、oninvalid 和 onclick 的问题，但没有成功。有任何想法吗？

谢谢！

<form>
<input type="radio" name="test" value="0" required oninvalid="this.setCustomValidity('Click me')" onclick="setCustomValidity('')">Zero<br>
<input type="radio" name="test" value="1" class="wrapper">One<br>
<input type="radio" name="test" value="2" class="wrapper">Two<br>
<input type="submit">
</form>

Answer 1

<form>
<input type="radio" id="test" name="test" value="0" oninvalid="this.setCustomValidity('Click me')" onclick="clearValidity();" required >Zero<br>
<input type="radio" name="test" value="1" onclick="clearValidity()" class="wrapper">One<br>
<input type="radio" name="test" value="2" onclick="clearValidity()" class="wrapper">Two<br>
<input type="submit">
</form>

<script>
function clearValidity()
{
document.getElementById('test').setCustomValidity('');
}

</script>