聚合物中纸元素的多重验证 [英] 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>

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

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

您有一个主意，为什么不起作用?我没有收到错误，只是没有用.或者您还有其他建议吗?我喜欢RegEx进行的这种验证，但对我而言确实不起作用.

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.

有趣的是，即使Polymer也不在其演示站点上进行多次验证，只需要:

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

推荐答案

我发现了问题:

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

代替

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

要尝试吗? http://jsfiddle.net/x96y2sx3/1/

这篇关于聚合物中纸元素的多重验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！