Question

        <paper-input
          id="server"
          floatinglabel=""
          label="Server Address"
          value=""
          required
          type="URL">
        </paper-input>

上面的示例一直工作，直到最新的聚合物更新，现在甚至所需的属性什么都不做。我在文档中缺少核心输入有什么变化吗？我对模式，数字，网址或电子邮件的所有输入都没有导致它获得无效的类。

Answer 1

        <paper-input-decorator
          id="address"
          labelVisible
          floatinglabel
          error="URL Required"
          label="Server Address">
          <input is="core-input" type="URL" id="server" required>
        </paper-input-decorator>

以上是用于检查url输入的更新标记。在更改之前，默认情况下输入无效，导致该字段在您键入时需要并更新。

使用新的更改，您必须调用一个函数来获取输入以返回无效的类。（您可以在输入上放置一个事件监听器，并在每次更新输入时运行该函数。但我只检查尝试提交）以检查我是否要将所有输入检查到一个容器（带有id的div）然后当用户点击提交时，我运行下面的功能。

validate: function (id) {
  'use strict';
  var $d = document.getElementById(id).querySelectorAll('paper-input-decorator');
  Array.prototype.forEach.call($d, function(d) {
    d.isInvalid = !d.querySelector('input').validity.valid;
  });
}

并传入输入容器的id。验证（ID）;

如果输入不符合类型/模式要求，将导致输入显示无效类。然后，您可以使用与之前相同的方法检查无效类。

invalid = document.querySelector("#address").classList.contains("invalid");

在自定义元素之外或

invalid = this.$.address.classList.contains("invalid");

内部自定义元素

然后在运行保存功能之前检查无效类的一些逻辑

if (!invalid) {
  save();
}

还要记住，装饰器和输入都有一个id。装饰器上的id用于检查有效性，而输入上的id用于从committedValue属性获取值。

以上信息是针对10 - 16 - 14之后拉出的主分支

更新到最新版本的聚合物，输入验证不再有效

1 个答案: