Yeah, the docs are lacking. The new way is more verbose, however it is much more flexible because you have full control of the <input> element. You can use whatever validation library you want with it if you don't want to use HTML constraints, and you can control when validation happens.
On Tue, Nov 11, 2014 at 5:14 PM, Eric Bidelman <[email protected]> wrote: > Ah! So that's not super intuitive on how to do this. Opened a bug to > produce some better docs: https://github.com/Polymer/paper-input/issues/98 > > Here's the gist: > > <template is="auto-binding"> > <paper-input-decorator label="Number" floatingLabel > error="is not a number" > isInvalid="{{!$.input.validity.valid}}"> > <input id="input" is="core-input" pattern="\d*"> > </paper-input-decorator> > </template> > > <script> > CoreStyle.g.paperInput.invalidColor = 'red'; > </script> > > On Wed, Nov 12, 2014 at 11:48 AM, Yvonne Yip <[email protected]> wrote: > >> You need to bind the isInvalid property on the paper-input-decorator to >> the validity property on the input. The demo for paper-input contains an >> example. >> >> On Tue, Nov 11, 2014 at 4:10 PM, James L <[email protected]> wrote: >> >>> Nope, the errors if using non-numeric inputs doesn't shown on Google >>> Chrome, not sure if other browsers having issues too. >>> >>> On Wed, Nov 12, 2014 at 7:54 AM, Eric Bidelman <[email protected]> wrote: >>> >>>> Should this work? http://jsbin.com/kumerocoju/1/edit >>>> >>>> <paper-input-decorator label="Number" floatingLabel error="input is >>>> should be a number!"> >>>> <input is="core-input" pattern="[0-9]"> >>>> </paper-input-decorator> >>>> >>>> >>>> On Wed, Nov 12, 2014 at 10:16 AM, Yvonne Yip <[email protected]> wrote: >>>> >>>>> There's an example of how to use paper-input-decorator with HTML >>>>> constraints validation in the paper-input demo. It's validating using the >>>>> "required" attribute instead of "pattern", but the usage should be >>>>> similar. >>>>> >>>>> paper-input does not support passing in validation attributes by >>>>> design. >>>>> >>>>> On Tue, Nov 11, 2014 at 3:06 PM, Eric Bidelman <[email protected]> >>>>> wrote: >>>>> >>>>>> Yvonne, do we have a good example of how to do pattern validation >>>>>> doing the new stuff? I tried to hunt it down myself but there doesn't >>>>>> seem >>>>>> to be API docs for it. >>>>>> >>>>>> On Wed, Nov 12, 2014 at 6:16 AM, James L <[email protected]> >>>>>> wrote: >>>>>> >>>>>>> Following paper-input example from >>>>>>> https://www.youtube.com/watch?v=HKrYfrAzqFA >>>>>>> >>>>>>> <paper-input floatingLabel label="Choose a number:" >>>>>>> value="{{item.innum}}" validate="^[0-9]*$" error="Not a >>>>>>> number"></paper-input> >>>>>>> >>>>>>> Don't throw any errors if I type characters, did I miss out any? >>>>>>> >>>>>>> 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/2859a108-4737-4c24-8d0b-69ed36a5eb9b%40googlegroups.com >>>>>>> <https://groups.google.com/d/msgid/polymer-dev/2859a108-4737-4c24-8d0b-69ed36a5eb9b%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/CAHk1xZLNv%3DV%2BCK8LvOE6GYw__6igTYw0n2h%3D3DFKJowjQV321g%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
