HowTo add a required indicator to paper-input

Given the paper-input

<paper-input 
  floatingLabel label="Type only numbers... (floating)" 
  validate="^[0-9]*$" error="Input     is not a number!">
</paper-input>

How do I add some indication that the field is required to the user.

Solution

From the core-input docs https://github.com/Polymer/core-input/blob/master/core-input.html AFAIK paper-input extends core-input therefore this should apply here too:

core-input also can optionally validate the value by providing it with a

regular expression to match against, or a validation function. The

"input-invalid" event is fired if the input value changes and is invalid.

The "invalid" property is also available for observation.

You can change your RegExp to

validate="^[0-9]+$"

http://www.regular-expressions.info/repeat.html

The plus tells the engine to attempt to match the preceding token once or more.

Update

Polymer.js core-input and paper-input support a required attribute since a check-in at 2014-07-08. Polymer.dart paper-elements was published at 2014-06-25 and therefore doesn't support it yet. It should work after the next release of paper-elements.

<paper-input 
  floatingLabel label="Type only numbers... (floating)" 
  validate="^[0-9]*$" error="Input     is not a number!"
  required>
</paper-input>

It seems there is only one error attribute for validate and required though.

The published paper-input demo doesn't include an example featuring required yet (the demo code in the GitHub repo already does) so I don't know if provides the behavior you wish for. But you could already use the required attribute and apply the asterisk yourself using CSS like

  * /deep/ paper-input[required] /deep/ #label::after,
  * /deep/ paper-input[required] /deep/ #floatedLabel::after {
    content: "*";
    font-weight: bold;
    font-size: 150%;
    color: red;
  }