0

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

在使用 WebShim Polyfill 时，我希望它能够以相同的方式工作，而无需访问 customValidationMessage 属性。

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

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

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

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

谢谢，尼克

4

1 回答 1

0

是的，这是可能的。如果您正确设置了所有内容，您只需更改对validationMessage 的调用。Webshims 总是通过 jQuery API 来修复元素，而不是 DOM 元素本身。这意味着您总是必须使用 $.prop 来访问 DOM 属性。

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

您还可以使用事件委托：

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

笔记：

  1. 无效的事件委托是通过事件捕获完成的（jQuery 通常不使用）。因此，您必须等到 polyfill 加载完毕。（通常，jQuery 的 ready 事件会延迟到那时。）

  2. 我检查是否有一个validationMessage，尽管有一个无效事件。原因如下：规范发生了变化，现在表单元素上也触发了无效事件。这目前仅在不稳定版本的 webshims 中进行填充，并且仅适用于无法使用的浏览器（IE < 12，Safari < 8 ...）。

于 2014-01-22T10:45:54.263 回答