无线电按钮组 - setCustomVality和冲突中所需的选项

Question

我正在尝试提出一个由无线电按钮组组成的表格，用户必须选择其中一个选项，如果他不选择一个自定义有效性消息。

，逻辑将是：

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

问题是，仅当所选选项是具有ONCLICK事件的选项时，事情才会继续前进。如果不是，那么消息将不断出现。

我试图用所需的，无效的和on Clickick的东西来处理，但无济于事。有什么想法吗？

谢谢！

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

Answer 2

这可以作为使其在任何类型的<input>上使用的函数写作：

document.querySelectorAll('form *[data-custom-validity]').forEach(el => {
    const firstInput = el.querySelector('input:first-of-type')
    // set custom validity if first input is invalid
    firstInput.addEventListener('invalid', () => firstInput.setCustomValidity(el.dataset.customValidity))
    // listen on all inputs for a change
    el.querySelectorAll('input').forEach(input =>
        input.addEventListener('change', () => firstInput.setCustomValidity('')))
})

<form>
    <div data-custom-validity="Click me.">
        <input type="radio">
        <input type="radio">
    </div>
</form>

Answer 3

这对我有用，我在这里留在这里，以防任何人。

<div class="genero">
<input type="radio" name="radiogroup" oninvalid="setCustomValidity('Mensaje')" onchange="try{setCustomValidity('')}catch(e){}" value="M">Masculino
    
<input type="radio" name="radiogroup" oninvalid="setCustomValidity('Mensaje')" onchange="try{setCustomValidity('')}catch(e){}" value="F">Femenino
</div>