Question

使用HTML5 Validation API时，可以拦截错误，访问错误消息并以不同方式呈现错误。

使用WebShim Polyfill时，我希望无需访问customValidationMessage属性即可以相同的方式工作。

是否可以配置WebShim，以便我们可以编写一致的代码来拦截这些错误消息，如下所示。

$("input").on("invalid", function(evt) { evt.preventDefault(); alert(evt.currentTarget.validationMessage); });

...我希望这段代码可以在Polyfill中使用，也许我误解了它的设置或什么？

我想这样做的原因是我可以抓取所有无效字段并在一个块中显示错误，而不是在每个字段旁边显示错误。

谢谢，尼克

Answer 1

是的，这是可能的。如果您正确设置了所有内容，则只需将调用更改为validationMessage即可。 Webshims总是通过jQuery API修复元素，而不是DOM元素本身。这意味着你总是have to use $.prop to access DOM properties。

$("input").on("invalid", function(evt) { 
    evt.preventDefault(); 
    alert($.prop(evt.target, "validationMessage")); 
});

您还可以使用eventdelegation：

$(function(){
    $(document).on("invalid", function(evt) {
        var message = $.prop(evt.target, "validationMessage");
        if(message){
            evt.preventDefault();
            alert(message);
        }
    });
});

注意：

无效的事件声明是通过事件捕获完成的（jQuery通常不会使用）。因此，您必须等待直至加载polyfill。（通常情况下，jQuery的就绪事件会延迟，直到那时。）
我检查是否存在validationMessage，尽管存在无效事件。原因如下：有一个规范更改，现在还在表单元素上触发了无效事件。目前，这只是在不稳定版本的webshims中填充，仅适用于无法使用的浏览器（IE <12，Safari＆lt; 8 ...）。

使用WebShim Polyfill lib时，我可以访问元素的默认validationMessage吗？

1 个答案: