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), or even better prevent the user from entering invalid data in the first place. In any case, the 'inputValueChanged' function should be prevented 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!
To validate the input as the input value changes, the isInvalid property on paper-input-decorator should be bound to the input's validity.valid property. ie.
<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>
To answer the comment below, if you don't have the id of the input in advance, you can listen for the input event and set isInvalid in the handler:
In this case you can listen for the input event and set isInvalid in the handler:
<template is="auto-binding">
<paper-input-decorator id="decorator" label="Number" floatingLabel
error="is not a number">
<input is="core-input" pattern="\d*" on-input="{{inputAction}}">
</paper-input-decorator>
</template>
<script>
var scope = document.querySelector('template[is=auto-binding]');
scope.inputAction = function(e) {
var d = document.getElementById('decorator');
d.isInvalid = !e.target.validity.valid;
}
</script>
Live example: http://jsbin.com/hocugi/1/edit