Answered on SO. On Tue, Nov 18, 2014 at 12:26 PM, Kelly St. John <[email protected]> wrote:
> ps: I have also now posted this issue on SO, in case you'd like to > respond there instead: > > > http://stackoverflow.com/questions/27003362/validation-issues-with-polymers-new-paper-input-paper-input-decorator-compone > > > On Tuesday, 18 November 2014 11:47:56 UTC-8, Kelly St. John wrote: >> >> Following the recent changes to paper-input and the introduction of >> paper-input-decorator (polymer v0.5.1), I'm now having trouble implementing >> input validation. For instance, prior to the recent changes I had >> constructed a custom 'property-editor' polymer element (i.e. an element >> that essentially combines a configurable icon, a configurable input control >> (type paper-dropdown-menu or regular input), and an associated optional >> unit value entry control (type paper-dropdown-menu or paper-input)), and it >> was very functional. Here is a small subset of code showing one of the >> templates within the aforementioned custom element, that activated when a >> regular expression pattern was provided to it. This was working well: >> >> <template if="{{controlType == 'input' && controlValidPattern != null}}"> >> <paper-input id="{{controlId}}" value="{{inputValue}}" label= >> "{{controlLabel}}" floatingLabel="{{controlFloatingLabel}}" pattern="{{ >> controlValidPattern}}" error="{{controlErrorMsg}}" required="{{ >> controlInputRequired}}" maxlength="{{controlMaxLength}}"> >> </paper-input> >> </template> >> >> >> Then I had implemented an `inputValueChanged` watcher function, which in >> turn fired a custom event for the host/consuming element to act on as >> required. >> >> The end goal is of course to display the validation error message for the >> control when the current input is invalid (which can occur 'live' as the >> user types, and could be present when the control is loaded with the >> initial input value), *but* prevent the 'inputValueChanged' function >> from firing unless the input is valid, *and* also not fire that event >> until the user leaves the control (on blur etc.). I've been playing around >> a little bit trying to get this to work again using the new versions of the >> paper elements (see example attempt below), but still having some >> difficulty. Can anyone kindly provide an example that achieves regular >> expression pattern matching, with the desired behaviors described above? >> >> >> <template if="{{controlType == 'input' && controlValidPattern != null}}"> >> <paper-input-decorator label="{{controlLabel}}" floatingLabel="{{ >> controlFloatingLabel}}" error="{{controlErrorMsg}}" isInvalid= >> "{{invalidEntry}}"> >> <input is="core-input" id="{{controlId}}" value= >> "{{inputValue}}" committedValue="{{committedValue}}" pattern="{{ >> controlValidPattern}}" maxlength="{{controlMaxLength}}" required="{{ >> controlInputRequired}}" size="{{controlWidth}}"> >> </paper-input-decorator> >> </template> >> >> >> Thanks in advance for any advice/example you can lend! >> >> 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/8e79e813-7c22-40ae-96af-9faa085f24bc%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/8e79e813-7c22-40ae-96af-9faa085f24bc%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/CAHk1xZJq34z9u78ZLk6ksyTXGx%2BpSnLyv6azrgL9r-n7XstY0g%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
