單選按鈕組 - setCustomValidity和required選項有衝突嗎？

Question

我試圖想出一個由單選按鈕組組成的表單，其中用戶必須選擇其中一個選項，並且他不存在自定義有效性消息。

所以邏輯將是：

1. 用戶忘記選擇一個選項，所述有效性信息顯示出來。
2. 他回去並選擇任何選項繼續。

問題是，如果選定的選項是帶有onclick事件的選項，那麼它只會繼續執行，如下所示。如果不是，那麼消息將繼續顯示。

我試圖與所需的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>