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

Question

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

上面的示例一直有效，直到最新的聚合物更新现在，即使是必需的属性也不起作用。 文档中是否缺少对核心输入的一些更改？ 我所有输入的模式、数字、URL 或电子邮件都不会导致它获得无效的类。

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");

自定义元素内部

然后在运行 save 函数之前检查无效类的一些逻辑

if (!invalid) {
  save();
}

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

以上信息适用于 10 - 16 - 14 之后拉动的主分支