Seems like the best solution might be to create a 0x0 opaque text input
(without a name attribute) next to the custom form field. If the custom
form field is invalid, call setCustomValidity("some invalid message"); on
the opaque field. In essence, make sure this "dummy" field is marked as
invalid when the CE is invalid, and reset to valid when the CE is valid
again.
When the form is submitted, if this convention is followed, the browser
will reject the submission and a visual cue will be added by the browser on
the edge of the invalid CE field (in all browsers other than Safari, since
Safari doesn't include any UI support for the HTML5 validation API. One
problem with this approach is the fact that you won't be able to easily
link the validation failure to the custom element. But perhaps this can be
overcome with some sort of convention. Say, a customElement property on
the "dummy" input that can contain a reference to the actual CE.
I'm finding this to be important to supporting the constraints API in the
ajax-form <https://github.com/garstasio/ajax-form> element I've developed,
and intend to follow these conventions in a CE form field I developed as
well (file-input <https://github.com/garstasio/file-input>) so that
ajax-form can recognize an invalid file-input (due to aborted form
submission) in browsers with shadow DOM support.
If this can be an accepted approach for CE form fields, then I think we
need to agree on a custom property name for the dummy field, or at least
some convention for programmatically getting a handle on the invalid CE,
given the dummy field.
On Wednesday, July 9, 2014 10:13:46 AM UTC-5, Eric Bidelman wrote:
>
> This was recently asked on StackOverflow
> <http://stackoverflow.com/questions/24615634/how-do-you-get-html5-inputs-to-validate-if-they-are-inside-polymer-web-component>
>
> :)
>
> FWIW, there was a discussion
> <https://groups.google.com/d/topic/polymer-dev/V0qah6T1Lzk/discussion> on
> this topic a while back (custom input elements participating in <form>
> submission). The general consensus was that it's easy enough to create and
> submit forms using FormData() and AJAX.
>
> I agree that it would be nice to stick <paper-input>/<core-input> inside a
> <form> and have it validated and submitted. The element needs to inherit
> from standard <input> for it to become part of the submission flow.
> However, one reason our input elements don't inherit from the standard
> input elements is that they're notoriously difficult to style.
>
> I tried experimenting what this could like but didn't get very far:
> http://jsbin.com/sotaqire/10/edit*. *While <input is="test-element"
> name="doisubmit"> does get submitted by the form, but the HTML5
> Constraint Validation API
> <http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/> doesn't
> pick up the custom element.
>
> On Tue, Jul 8, 2014 at 4:02 PM, Joe Adams <[email protected] <javascript:>
> > wrote:
>
>> I am using Polymer Web Components and my application targets Chrome. On
>> my form, outside the Web Components I have an input type='number', when I
>> enter 'a' into the input and submit the form, I get a tooltip that says
>> "Please enter a number."
>>
>> However, I have another input type="number" that is in the Shadow DOM of
>> a web component. When I enter 'a' into that field and submit the form, Is
>> there any not-too-hacky way to get this functionality to work in Web
>> Component?
>>
>> Alternately can I have a Web Component that does a 'submit' when you
>> click it or click enter, that also fires all my validation rules when it is
>> activated?
>>
> Thanks,
>>
>> Joe
>>
>> P.S. I also need to make something like the tagging functionality that
>> allows you to tag topics in Google Groups when you make a post. Is that
>> open source code that I can lift?
>>
>> Follow Polymer on Google+: plus.google.com/107187849809354688692
>> ---
>> You received this message because you are subscribed to the Google Groups
>> "Polymer" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to [email protected] <javascript:>.
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/polymer-dev/ea57c6d8-f492-44ea-874b-a34d0472f3e2%40googlegroups.com
>>
>> <https://groups.google.com/d/msgid/polymer-dev/ea57c6d8-f492-44ea-874b-a34d0472f3e2%40googlegroups.com?utm_medium=email&utm_source=footer>
>> .
>> For more options, visit https://groups.google.com/d/optout.
>>
>
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/9733b201-47cd-48fd-9e1b-9c8644275dc3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
