Re: [w3c/webcomponents] Need callback for form submit data (#187)

Not sure if I understand correctly.
When calling `reportValidity()` on a native input field it will display the error message using the built-in UI (e.g. error popup on Chrome).
In my custom element I'd implement `reportValidity()` in a way that matches the design guidelines (e.g. material design).
I'd assume that when submitting a form on a form-associated custom element my `reportValidity()` would be called instead of the built-in UI, but unfortunately this seems not to be the case.

In the given sample in the doc...

https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit?pli=1#heading=h.2izmbauztyja

....and in all other examples that I've found it is also a bit weird that the validity will be set whenever the input changes as this is may be a very expensive operation.
Think of a signature input fields that does all kinds of image analysis to check if the control is valid. So the validation should only be checked when the browser calls my `checkValidity()` or `reportValidity()` methods instead on each change of the input.

I'd also expect to have a `formDataCallback(FormData)` or something along those lines to add the contents of the custom element to the form data to be submitted.
Right now the only way is to call `this.internals_.setFormValue('') `to set the value, but when should I call this method? Whenever the value changes? Again this may take a lot of time to calculate the value based on the input, so I'd want to call this method only whenever the user submits the form. How to do that?
I tried to use the event based form participation:

https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit?pli=1#heading=h.je8c7y5qpgki

but this seems not to work (quite yet)?

It would be so cool to be able to implement a custom element that can be used as a drop-in replacement for native input fields or to add new exciting input controls, but right now I don't see a way to do so due to the issues above.
Hopefully I just got it all wrong. I'd be super-happy to find a code example that shows a basic example how to 
- add the value to the formdata on form submission
- performs the validation check when the form gets validated (=user clicks on submit)
- reports an error in a custom way and avoids the default browser UI

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/187#issuecomment-619850217