Polymer paper-input validity flag

Question

I'm experimenting with Polymer elements and currently with the paper form elements.

I haven't still managed to find if it is possible to get in a Javascript variable the fact that a paper-form is valid. Any ideas?

I'm using auto-validate.

 <paper-input id="foo"
        name="foo"
        label="Foo"
        required
        auto-validate
        pattern="[A-Za-z0-9]+"
        error-message="Alphanumerical characters only">
 </paper-input>

Thanks a lot!

Answer 1

There is a property on the paper-input element called invalid which you can check to see if the value of the input is valid or not.

For example:

<paper-input id="foo"
  name="foo"
  label="Foo"
  required
  auto-validate
  pattern="[A-Za-z0-9]+"
  invalid="{{invalid}}"
  error-message="Alphanumerical characters only">
</paper-input>

And then in the JavaScript you can call

var invalid = this.$.foo.invalid;

See the docs here for more info.