Multiple Validation of Paper-Elements in Polymer

问题

I would like to validate multiple paper-element fields immediately. Right now it works perfectly with just one field.

This one works for one field, but only if the focus is changed -> bad

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

This one works for one field just in time -> better

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

Now I would like to extend the functionality, that's my idea so far:

<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>
  <paper-input-decorator id="decorator2" 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) {
    ($(this).parent())[0].isInvalid = !e.target.validity.valid;
  }
</script>

The idea is that I get the parent field instead of getting the field by ID.

Do you have an idea, why it doesn't work? I don't get an error it just doesn't work. Or do you have other suggestions? I love this validation with RegEx but it doesn't really works for me.

It looks like as if a lot of people have validation problems since the latest update of the paper elements.

The funny thing is that even Polymer don't have multiple validation on their demo site, only required: https://www.polymer-project.org/components/paper-input/demo.html

Otherwise I could have copied it...

回答1:

I found the problem:

($(event.target).parent())[0].isInvalid = !e.target.validity.valid;

instead of

($(this).parent())[0].isInvalid = !e.target.validity.valid;

Wanna try it? http://jsfiddle.net/x96y2sx3/1/

来源：https://stackoverflow.com/questions/28194592/multiple-validation-of-paper-elements-in-polymer

标签

jquery

regex

validation

polymer