Question

我正在尝试提供一个由单选按钮组组成的表单，用户必须选择其中一个选项，如果他没有，则会显示自定义有效性消息。

所以逻辑将是：

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

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

我试图耍弄所需的，无效的和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>

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>

单选按钮组 - setCustomValidity和冲突中的必需选项？

2 个答案: