Ray - I say try the 0x0 trick and see how far you get with it. It's a bummer to have to hack around like that :\
On Sunday, October 12, 2014 8:20:24 PM UTC-7, [email protected] wrote: > > 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]> 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]. >>> 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/f58491e8-a58c-41a8-9aab-b5178414d55e%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
