Question

我在.submit中编写了一个自定义的javascript / jQuery验证函数，我使用reportValidity函数（）来获取这些工具提示的泡泡，但在开发过程中学到它只能在Opera和Chrome中完全运行。显然，reportValidity（）在IE，Safari和FF中不能以相同的方式工作。

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

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

解决此问题的方法是什么，即获得与Chrome或Opera相似的行为方式？

Answer 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的解决方法部分对我来说似乎很好。

Answer 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不支持），如果不支持，则添加一个显示带有验证消息的警报框的方法。屏幕阅读器会识别警报框。

需要解决reportValidity（）

2 个答案: