Firefox多次点击后不显示表单约束校验错误提示的解决方法问询

问题根因 #

这是Firefox原生的交互设计，为避免重复弹出校验提示打扰用户，连续3次触发同字段的不通过校验后，会自动隐藏默认的constraint-violation提示，仅保留自动聚焦逻辑，无原生配置项可以直接关闭该逻辑。

可行解决方案 #

方案1：重置校验状态强制触发原生提示 #

修改提交逻辑，每次校验前先重置无效字段的自定义校验属性，即可强制Firefox每次都弹出提示，不需要修改原有按钮类型，适配你现有代码的修改版如下：

function mySubmit(formId){
    let form = document.getElementById(formId);
    // 先定位到未通过校验的字段
    const invalidFields = form.querySelectorAll(':invalid');
    if (invalidFields.length) {
        // 清空再重新赋值校验信息，重置Firefox的提示隐藏标记
        invalidFields.forEach(field => {
            const defaultMsg = field.validationMessage;
            field.setCustomValidity('');
            field.setCustomValidity(defaultMsg);
            // 触发提示
            field.reportValidity();
        });
        return;
    }
    // 校验通过走原有提交逻辑
    if(form.reportValidity()) {
        window.alert("submit");
        form.reset();
    }
}

方案2：自定义校验提示（全浏览器表现统一） #

如果需要完全对齐Chrome、IE、Safari的交互，完全不受浏览器原生逻辑限制，可以监听表单的invalid事件，阻止原生提示弹出，自己开发浮层提示展示校验错误信息，该方案兼容性最好，也可以自定义提示的样式和位置。

补充说明 #

你之前尝试更换按钮为type="submit"无效是正常的，该隐藏逻辑和按钮类型无关，只要调用了原生的校验触发逻辑，都会触发Firefox的该设计。

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