需要解决 reportValidity()答案

【问题标题】：Need a work around for reportValidity()需要解决 reportValidity()
【发布时间】：2017-09-25 16:25:54
【问题描述】：

我在 .submit 中编写了一个自定义 javascript/jQuery 验证函数，并使用 reportValidity function() 来获取这些工具提示气泡，但在开发过程中了解到它只能在 Opera 和 Chrome 中完全运行。显然，reportValidity() 在 IE、Safari 和 FF 中不起作用。

在FF中，它至少会将用户带到不完整的问题，但没有像chrome和opera那样提供自动工具提示来通知用户。

Safari 和 IE 显然验证正确，但没有任何迹象表明任何部分不完整。

解决这个问题的方法是什么，即获得与 Chrome 或 Opera 类似的行为的方法？

【问题讨论】：

标签： javascript jquery google-chrome firefox safari

【解决方案1】：

这是我所做的：

document.forms[0].getElementsByTagName("input")[0].setCustomValidity("Please fill out at least one of these fields.");
    try {
        document.forms[0].reportValidity();
    }
    catch (e){ //for browsers that don't support reportValidity
        $($('input')[0]).popover({
            placement:'right',
            trigger:'manual',
            html:true,
            content:'Please fill out at least one of these fields.'
        });
        $($('input')[0]).popover('show');
        setTimeout(function () {
            $($('input')[0]).popover('hide');
        }, 4000);
    }
    finally{
        return false;
    }

您显然可以调整 4 秒超时以满足您的需求，或者完全用其他东西替换它，但使用 try-catch 和 popover 的解决方法部分似乎对我来说效果很好。

【讨论】：

很遗憾，我无法对此进行测试，因为我无法再使用该产品。
哈哈，我想我可以快速实现类似的东西并试一试
只是分享以防其他人遇到您的问题 - 由您决定！
这对我来说效果很好，干得好。但是，我有一个问题，即当多次调用该方法时弹出框内容不会更新（即，如果验证失败两次但由于不同的原因，则会显示旧的弹出错误，但第二次出现的新错误除外）。有没有办法强制弹出文本更新/重新创建对象？
我认为最好确定两个验证中的哪一个更重要，然后首先显示一个。否则，您可以尝试使用字符串连接将“请至少填写其中一个字段”添加到现有的有效性消息中。

【解决方案2】：

在我们的一个项目中遇到了同样的问题，该问题也需要可访问并因此支持屏幕阅读器 - 大多数解决方案完全忽略了这个问题。

因为reportValidity 的优点在于它也能被屏幕阅读器（如 Jaws）识别，而自己添加一些 HTML 元素通常不能。

我们为该方法创建了以下 polyfill：

if (!HTMLInputElement.prototype.reportValidity) {
    HTMLInputElement.prototype.reportValidity = function () {
        if (this.checkValidity()) {
            return true;
        } else {
            alert(this.validationMessage);
            return false;
        }
    };
}

它只是检查浏览器是否支持该方法（我们知道 IE 不支持），如果不支持，它会添加一个显示带有验证消息的警告框的方法。屏幕阅读器可以识别警报框。

例如，也可以显示一个标记为ARIA-live region 的 DIV（或其他内容）来代替警报框。

【讨论】：