Группа радиокнопки - setCustomValidity и требуемая опция в конфликте?

Question

Я пытаюсь создать форму, состоящую из группы переключателей, в которой пользователь должен выбрать один из параметров, и если у него нет специального сообщения о действительности.

Поэтому логика будет:

1. Пользователь забывает выбрать опцию и сообщение валидность показывает вверх.
2. Он возвращается и выбирает любой вариант, чтобы продолжить.

Проблема в том, как все это происходит только в том случае, если выбранная опция соответствует событию onclick, как показано ниже. Если это не так, сообщение будет продолжать отображаться.

Я попытался объединить с нужными, oninvalid и onclick thingies, но безрезультатно. Есть идеи?

Спасибо!

<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>