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

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进行这种验证，但它对我并不有效。

看起来，自从最新的纸质元素更新以来，很多人都有验证问题。

有趣的是，即使是聚合物在它们的演示站点上也没有多重验证，只需要：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/