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

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/

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

Multiple Validation of Paper-Elements in Polymer

regex

validation

jquery

polymer