Paper-input validate with regexp not working?

[James L]

Following paper-input example from https://www.youtube.com/watch?v=HKrYfrAzqFA

<paper-input floatingLabel label="Choose a number:" value="{{item.innum}}" validate="^[0-9]*$" error="Not a number"></paper-input>

Don't throw any errors if I type characters, did I miss out any?

[Eric Bidelman]

Yvonne, do we have a good example of how to do pattern validation doing the new stuff? I tried to hunt it down myself but there doesn't seem to be API docs for it.

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 polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/2859a108-4737-4c24-8d0b-69ed36a5eb9b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Yvonne Yip]

There's an example of how to use paper-input-decorator with HTML constraints validation in the paper-input demo. It's validating using the "required" attribute instead of "pattern", but the usage should be similar.

paper-input does not support passing in validation attributes by design.

[Eric Bidelman]

Should this work? http://jsbin.com/kumerocoju/1/edit

<paper-input-decorator label="Number" floatingLabel error="input is should be a number!">

  <input is="core-input" pattern="[0-9]">

</paper-input-decorator>

[James L]

Nope, the errors if using non-numeric inputs doesn't shown on Google Chrome, not sure if other browsers having issues too.

[Yvonne Yip]

You need to bind the isInvalid property on the paper-input-decorator to the validity property on the input. The demo for paper-input contains an example.

[Eric Bidelman]

Ah! So that's not super intuitive on how to do this. Opened  a bug to produce some better docs: https://github.com/Polymer/paper-input/issues/98

Here's the gist:

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

<script>

  CoreStyle.g.paperInput.invalidColor = 'red';

</script>

[Yvonne Yip]

Yeah, the docs are lacking. The new way is more verbose, however it is much more flexible because you have full control of the <input> element. You can use whatever validation library you want with it if you don't want to use HTML constraints, and you can control when validation happens.