Polymer 聚合物纸输入表单。检查有效性（）

但是如果纸质输入电子邮件留空

checkValidity（）

仍然注册为有效

（）

第2部分：

       submit:function(){
            var form = this.shadowRoot.querySelector('form')
            var isValid = form.checkValidity();
            console.debug(isValid)
        },

--

令人惊讶的是，这是有效的：D 除了造型？它看起来很小，突然间我有了边框和其他东西？

聚合元素（除了那些扩展HTML输入元素的元素-纸张和核心元素输入元素仅嵌入HTML输入元素）不能被识别为表单输入元素，也不能参与表单验证

---

另请参见

我没想到我的建议会导致这样的解决方案；-）当您扩展自定义元素时，定义“新”的影子DOM可能会起作用，但扩展DOM元素和设置新的影子DOM实现可能不会起作用（据我所知，我没有尝试过，但看到一些关于尝试失败的抱怨）。如果您想坚持使用core-/paper输入，我想更好的尝试是构建一个利用core-/paper输入的验证功能的自定义表单元素。我认为聚合物团队也考虑过这一点。我已经想知道他们为什么还没有想出任何东西。好吧，看看更新，它是有效的：）有关于样式的建议吗？试试看，它现在看起来很难看：）但它确实起作用了。出于好奇，我会尝试一下，但今天不会了，我已经非常累了，这里已经是夜晚了……你应该扩展“纸输入”而不是“输入”，以获得正确的样式作为纸输入

       submit:function(){
            var form = this.shadowRoot.querySelector('form')
            var isValid = form.checkValidity();
            console.debug(isValid)
        },

<polymer-element name="my-name" extends="input" attributes="value" noscript>
    <template>
        <paper-input label="Name" name="name" value="{{value}}"></paper-input>
    </template>
</polymer-element>

<polymer-element name="my-email" extends="input" attributes="value" noscript>
    <template>
        <paper-input label="Email" name="email" value="{{value}}" type="email" required></paper-input>
    </template>
</polymer-element>

<polymer-element name="my-phone" extends="input" attributes="value" noscript>
    <template>
        <paper-input label="Phone" name="phone" value="{{value}}" type="tel"></paper-input>
    </template>
</polymer-element>

<polymer-element name="my-message" extends="input" attributes="value" noscript>
    <template>
        <paper-input label="Message" name="message" value="{{value}}" multiline></paper-input>
    </template>
</polymer-element>

<form>
    <input is="my-name">
    <input is="my-email" type="email" required>
    <input is="my-phone">
    <input is="my-message">
    <input name="code" value="12345" hidden required>
</form>