您如何获得HTML5输入以验证它们是否在Polymer Web Components中? [英] How do you get HTML5 inputs to validate if they are inside Polymer Web Components?

问题描述

我正在使用Polymer Web Components，我的应用程序以Chrome为目标.在我的表单上，在Web组件之外，我有一个输入类型=数字"，当我在输入中输入"a"并提交表单时，我会看到提示请输入数字"的工具提示.

I am using Polymer Web Components and my application targets Chrome. On my form, outside the Web Components I have an input type='number', when I enter 'a' into the input and submit the form, I get a tooltip that says "Please enter a number."

但是，我在Web组件的Shadow DOM中还有另一个输入type ="number".当我在该字段中输入"a"并提交表单时，没有任何工具提示.无论如何，可以使行为更加一致吗?

However, I have another input type="number" that is in the Shadow DOM of a web component. When I enter 'a' into that field and submit the form, I get no tooltip. Is there anyway to make the behavior more consistent?

推荐答案

我没有看到您描述的相同问题(使用Chrome 36和Polymer 0.3.3).表单验证可通过以下简单的Polymer元素( jsbin )正常工作:

I'm not seeing the same problem you describe (using Chrome 36 and Polymer 0.3.3). The form validation works as expected with the following simple Polymer element (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>

编辑:在显示的示例中，由于

EDIT: In the examples you've shown, your host page's <form> is separated from the Polymer element's <input> due to the shadow DOM boundary. Is there a reason you're structuring things that way?

它看起来不像影子DOM中存在的任何<input>实际上是与轻型DOM <form>一起提交的，因此从某种意义上讲，未经过验证的事实至少是可以预期的.您的担忧. (查看此示例的网络跟踪，您只会看到test=1234被提交.)

It doesn't look like any <input>s that exist in the shadow DOM actually get submitted along with a light DOM <form>, so the fact that they're not being validated is in a sense expected and the least of your concerns. (Take a look at the Network trace for this example and you'll see that only test=1234 gets submitted.)

采用上述示例中的方法并将<form>包含在Polymer元素中就足以获得现代浏览器提供的预期验证行为.另外，如果您真正想要的只是<template>并且您不需要完整的Polymer元素，则可以按照(

Taking the approach in the example above and including the <form> in the Polymer element is enough to get the expected validation behavior that modern browsers offer. Alternatively, if all you really want is <template> and you don't need a full blown Polymer element, you could do something along the lines of (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中.

That works too, because once the <template> is bound, the contents are added directly to the page's DOM like any other element.

如果您坚决不能按照说明重构代码，那么我认为您需要通过针对所涉及的Web浏览器的错误来解决您的问题，并查看它们是否有意愿开始考虑<input>元素在影子DOM中作为轻型DOM <form>的一部分.

If you strongly that you can't refactor your code as described, then I think you'd need to address your concern via bugs against the web browsers in question and see if they have any willingness to start considering <input> elements in the shadow DOM as part of a light DOM's <form>.

这篇关于您如何获得HTML5输入以验证它们是否在Polymer Web Components中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！