如何使HTML表单验证自定义HtmlInputElement?

时间:2017-02-07 13:17:46

标签: html5 polymer web-component

我想创建一个带有自定义模板的自定义输入元素,并使本机HTML <form>尊重它,因为它与其他原生输入元素一样。例如,当元素无效并且用户尝试提交表单时,浏览器将触发我的自定义元素上的验证逻辑,并阻止提交和显示错误。此外,在提交或序列化表单时,还会包含自定义元素的值。

我已经使用了“is”属性和扩展HtmlInputElement对象的自定义类,但我似乎无法使用此方法使用自定义模板。

如果可能的话,我怎么能这样做呢?

欢迎使用纯JavaScript和Polymer的示例。

1 个答案:

答案 0 :(得分:2)

要理解的一个限制:在跨浏览器实现的当前v1版本的自定义元素中(而不是传统的v0版本,肯定不会在未来的浏览器中实现),自定义元素类只能扩展{ {1}}。

因此,HTMLElement一个扩展customElements.define的类将失败。

(所有这一切,除非上面的评论中指出,否则你使用polyfill。)

但为了更好地回答有关制作HtmlInputElement内容的具体问题,请参阅Custom input element in native form上的答案。