聚合物中纸元素的多重验证

Question

我想立即验证多个纸张元素字段。现在它只适用于一个字段。

这适用于一个领域，但前提是焦点改变 -> 不好

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

这个适用于一个领域，及时->更好

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

现在我想扩展功能，这是我目前的想法：

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

这个想法是我获取父字段而不是通过 ID 获取字段。

你有什么想法，为什么它不起作用？我没有收到错误，它只是不起作用。或者你有其他建议吗？我喜欢使用 RegEx 进行的这种验证，但它并不适合我。

自从纸质元素的最新更新以来，似乎很多人都遇到了验证问题。

有趣的是，即使是 Polymer 在他们的演示站点上也没有多重验证，只需要：https://www.polymer-project.org/components/paper-input/demo.html

否则我可以复制它...

Answer 1

我发现了问题：

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

而不是

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

想试试吗？ http://jsfiddle.net/x96y2sx3/1/