CODEWITHSUNDEEP
dartpolymerdart-polymer
st_clair_clarke
st_clair_clarke

Reputation: 5715

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.

Upvotes: 3

Views: 3588

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657476

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;
  }

Upvotes: 2

Related Questions