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. For more options, visit https://groups.google.com/d/optout.
