JavaScript输入框验证消息动态更新异常问题求助

问题场景与代码 #

开发Web表单时，输入框size-ft2的min/max值需要根据size-ft1的输入动态调整，相关代码如下：

JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
    var checkprice = document.getElementById('checkprice_taurp');
    var sizeFt1 = document.getElementById('size-ft1');
    var sizeFt2 = document.getElementById('size-ft2');
    var form_taurp = document.getElementById('form-taurp');

    function updateFt2() {
        var minft1 = parseInt(sizeFt1.value);

        if (!isNaN(minft1)) {
            sizeFt2.min = minft1;

            switch (minft1) {
                case 2:
                    sizeFt2.max = 10;
                    break;
                case 3:
                    sizeFt2.max = 10;
                    break;
                case 4:
                    sizeFt2.max = 11;
                    break;
                case 5:
                    sizeFt2.max = 12;
                    break;
                case 6:
                    sizeFt2.max = 15;
                    break;
                case 7:
                    sizeFt2.max = 10;
                    break;
                case 8:
                    sizeFt2.max = 16;
                    break;
                case 9:
                    sizeFt2.max = 12;
                    break;
                default:
                    console.log('Error Returned to Default')
            }
        }
    }

    checkprice.addEventListener('click', function() {
        if (form_taurp.reportValidity()) {
            updateFt2();
        }
    });
});

HTML代码 #

<form id="form-taurp">
    <label for="size-ft1">Size Ft1:</label>
    <input type="number" name="size-ft1" id="size-ft1" class="textinputs taurp-size" min="2" max="10" required>
    <br>
    <label for="size-ft2">Size Ft2:</label>
    <input type="number" name="size-ft2" id="size-ft2" class="textinputs taurp-size" required>
    <br>
    <button type="button" id="checkprice_taurp">Check Price</button>
    <button type="submit" id="submit_taurp">Submit</button>
</form>

遇到的问题 #

当size-ft1的值修改后，size-ft2的验证消息无法同步更新：

• 例：先将size-ft1设为2，size-ft2设为1，验证消息显示“值不应小于2”（符合预期）；
• 再将size-ft1改为3，size-ft2仍为1，验证消息依旧显示“值不应小于2”，而非正确的“值不应小于3”；
• 只有修改size-ft2的值后，验证消息才会更新为正确内容。

问题原因 #

浏览器的原生表单验证机制会缓存输入框的验证状态，仅在输入框的值发生变化、或者显式调用验证方法时，才会重新根据当前的min/max属性计算验证结果。仅修改size-ft2的min/max属性，不会触发验证状态的自动更新，因此旧的验证消息会被保留。

解决方案 #

需要在更新size-ft2的验证规则后，手动清除旧的验证状态并触发重新验证，同时建议在size-ft1的值变化时就触发规则更新，而不是仅在点击按钮时执行：

修改后的JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
    var checkprice = document.getElementById('checkprice_taurp');
    var sizeFt1 = document.getElementById('size-ft1');
    var sizeFt2 = document.getElementById('size-ft2');
    var form_taurp = document.getElementById('form-taurp');

    function updateFt2() {
        var minft1 = parseInt(sizeFt1.value);

        if (!isNaN(minft1)) {
            sizeFt2.min = minft1;

            switch (minft1) {
                case 2:
                    sizeFt2.max = 10;
                    break;
                case 3:
                    sizeFt2.max = 10;
                    break;
                case 4:
                    sizeFt2.max = 11;
                    break;
                case 5:
                    sizeFt2.max = 12;
                    break;
                case 6:
                    sizeFt2.max = 15;
                    break;
                case 7:
                    sizeFt2.max = 10;
                    break;
                case 8:
                    sizeFt2.max = 16;
                    break;
                case 9:
                    sizeFt2.max = 12;
                    break;
                default:
                    console.log('Error Returned to Default')
            }

            // 清除旧的验证消息并触发重新验证
            sizeFt2.setCustomValidity('');
            // 如果需要立即显示新的验证消息，可调用reportValidity()
            sizeFt2.reportValidity();
        }
    }

    // 当size-ft1的值变化时就更新规则
    sizeFt1.addEventListener('input', updateFt2);

    checkprice.addEventListener('click', function() {
        if (form_taurp.reportValidity()) {
            updateFt2();
        }
    });
});

关键修改点 #

1. 给size-ft1添加input事件监听，值变化时立即更新size-ft2的验证规则；
2. 在updateFt2函数末尾，调用sizeFt2.setCustomValidity('')清除旧的自定义验证消息；
3. 调用sizeFt2.reportValidity()，在规则更新后立即触发验证并显示新的消息。

内容的提问来源于stack exchange，提问作者aurxc