更新到最新版本的聚合物和输入验证不再有效 [英] updated to newest version of polymer and input validation is no longer working

问题描述

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

上面的例子一直工作到最新的聚合物更新，现在甚至必需的属性什么也不做.我在文档中遗漏了对核心输入的一些更改吗?我所有输入的模式、数字、网址或电子邮件都没有导致它获得无效类.

the example above worked until the latest polymer update now even the required attribute does nothing. was there some change to core-input that i am missing in documentation? all my inputs with patterns, numbers, urls, or emails nothing causes it to get the invalid class.

推荐答案

        <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 输入的更新标记.在默认情况下输入无效的更改之前，该字段是必需的并在您键入时更新.

above is the updated markup for checking input of url. before the changes the input had invalid by default cause the field was required and updated as you type.

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

with the new changes you have to call a function to get the input to return the invalid class. (you could put a event listener on the input and run that function every time the input is updated. but i only check on attempted submission) to check i put all the inputs i want to check in a container (a div with a id) then when user click to submit i run the function below.

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

and pass in the id of the input container. validate(id);

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

that will cause the input to display the invalid class if input doesn't meet type / pattern requirement. you can then check for invalid class in the same method as before.

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

在自定义元素之外或

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

在自定义元素内

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

then some logic to check for invalid class before running the save function

if (!invalid) {
  save();
}

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

also keep in mind that the decorator and input both have a id. the id on the decorator is used to check for validity while the id on the input is there for getting the value from the committedValue attribute.

上面的信息是在 10 - 16 - 14 之后拉取的主分支

info above is for the master branch pulled after 10 - 16 - 14

这篇关于更新到最新版本的聚合物和输入验证不再有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！