I’ll try it out on file-input first. If that works out, I’ll probably open up a PR for paper/core-input.
On Wed, Oct 22, 2014 at 8:22 PM, Rob Dodson <[email protected]> wrote: > 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/1414031333342.20cf254f%40Nodemailer. For more options, visit https://groups.google.com/d/optout.
