你如何获得 HTML5 输入来验证它们是否在 Polymer Web 组件中？答案

【问题标题】：How do you get HTML5 inputs to validate if they are inside Polymer Web Components?你如何获得 HTML5 输入来验证它们是否在 Polymer Web 组件中？
【发布时间】：2014-08-28 05:35:41
【问题描述】：

我正在使用 Polymer Web Components 并且我的应用程序以 Chrome 为目标。在我的表单上，在 Web 组件之外，我有一个 input type='number'，当我在输入中输入 'a' 并提交表单时，我会收到一个工具提示，上面写着“请输入一个数字”。

但是，我有另一个输入 type="number" 在 Web 组件的 Shadow DOM 中。当我在该字段中输入“a”并提交表单时，我没有收到任何工具提示。有没有办法让行为更加一致？

【问题讨论】：

标签： html polymer web-component

【解决方案1】：

我没有看到您描述的相同问题（使用 Chrome 36 和 Polymer 0.3.3）。使用以下简单的 Polymer 元素 (jsbin)，表单验证按预期工作：

<polymer-element name="test-element" noscript>
  <template>
    <form>
      <label>Inside the element:</label>
      <input type="number" placeholder="Numbers only!">
      <input type="submit">
    </form>
  </template>
</polymer-element>

编辑：在您展示的示例中，由于shadow DOM 边界，您的主机页面的<form> 与Polymer 元素的<input> 分开。你有这样的结构吗？

看起来影子 DOM 中存在的任何 <input>s 实际上并没有与轻型 DOM <form> 一起提交，因此它们没有被验证的事实在某种意义上是意料之中的，也是最少的你的担忧。（查看this example 的网络跟踪，您会看到只有test=1234 被提交。）

采用上面示例中的方法并在 Polymer 元素中包含 <form> 足以获得现代浏览器提供的预期验证行为。或者，如果您真正想要的是 <template> 并且您不需要完整的 Polymer 元素，您可以按照 (jsbin) 的方式做一些事情：

<form>
  <template is="auto-binding">
    <label>Inside the element:</label>
    <input type="number" placeholder="Numbers only!" value="{{myNumber}}">
  </template>
  <input type="submit">
</form>
<script>
  document.querySelector('template').myNumber = 34;
</script>

这也有效，因为一旦绑定了<template>，内容就会像任何其他元素一样直接添加到页面的 DOM 中。

如果你强烈认为你不能按照描述重构你的代码，那么我认为你需要通过针对相关网络浏览器的错误来解决你的问题，看看他们是否愿意开始考虑 <input> 元素在 shadow DOM 中，作为 light DOM 的一部分 <form>。

【讨论】：

这显示了错误。