How to make an HTML form validate a custom HtmlInputElement?

Question

I'd like to create a custom input element with a custom template and have the native HTML <form> respect it as it does the other native input elements. For example, when the element is invalid and the user tries to submit the form, the browser would trigger the validation logic on my custom element and prevent submission and show errors. Also, when the form is submitted or serialised, the value of the custom element is included also.

I've gotten as far as using the "is" attribute and a custom class that extends HtmlInputElement object, but I can't seem to use a custom template using this method.

How can I go about doing this if it's possible?

Examples using plain JavaScript as well as Polymer are welcomed.

maybe it's the same question as http://stackoverflow.com/a/40173805/4600982 — Supersharp, Feb 07 '17 at 15:07
One limitation to understand is that in the current v1 version of custom elements that’s being implemented across browsers (rather than the legacy v0 version which is definitely not going to be implemented across browsers going forward) is that a custom-element class can only extend `HTMLElement`. So feeding [`customElements.define`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) a class that extends `HtmlInputElement` will fail. — sideshowbarker, Feb 07 '17 at 15:11
@sideshowbarker I suppose we can mark your comment as the answer. I saw a long thread on the W3 GitHub discussing the `is` attribute and this similar functionality was alluded to in there as impossible right now. — kshep92, Feb 11 '17 at 00:58
@kshep92 OK I’ll post it as answer so that we have one here at least. Sorry about the limitations but the back story is that what we arrived it for v1 was the result of long negotiations about the design, with the need to work out some pretty big disagreements between Google and Apple about it when we started out. But the end result is that we finally arrived at something that Apple was willing to implement—and has implemented. So that has been a giant win. — sideshowbarker, Feb 11 '17 at 01:05
Anyway I think the ultimate right answer to this question is http://stackoverflow.com/questions/40171535/custom-input-element-in-native-form/40173805#40173805 (I guess I’ll also update my answer here to note that.) — sideshowbarker, Feb 11 '17 at 01:11

score 2 · Accepted Answer · edited May 23 '17 at 11:46

One limitation to understand: in the current v1 version of custom elements being implemented across browsers (rather than the legacy v0 version which is definitely not going to be implemented across browsers going forward), a custom-element class can only extend HTMLElement .

So feeding customElements.define a class that extends HtmlInputElement will fail.

(All that said, unless as noted in a comment above, you use a polyfill.)

But for a better answer to the specific question about making something that extends input, see the answer at Custom input element in native form.

How to make an HTML form validate a custom HtmlInputElement?

1 Answers1