如何在dart聚合物元素上使用HTML5验证？ [英] How do I use HTML5 validations on dart polymer elements?

问题描述

我试图创建自己的定制聚合物元素，将强制执行指定的输入掩码。我已创建此元素：

I'm trying to create my own custom polymer-element that would enforce a specified input mask. I've created this element:

<polymer-element name="phone-input" attributes="phoneNumber">
  <template>
    <form>
    <input id="txtPhoneNumber" type="text" class="field phone-field"
    required placeholder="999-999-9999" maxlength="12" value="{{ phoneNumber }}"/>
    </form>
  </template>
  <script type="application/dart" src="phone_input.dart"></script>
</polymer-element>

可以看到，我的元素中的输入字段标有 b>属性。所以当我把我的电话输入元素在一个形式，我期望它强制这个约束。

As you can see, the input field inside my element is marked with the required attribute. So when I put my phone-input element in a form, I expect it to enforce this constrain.

<form name="testForm">
  <phone-input id="myPhoneInput"></phone-input>
  <button value="" id="btnTest">Test</button>
</form>

但是，当我这样做时，我可以随意发布表单，即使有在我的领域没有价值。

However, when I do it this way, I can post the form at will, even if there is no value in my field.

我设法确保错误消息在字段为空时弹出的唯一方法是将我的表单和我的按钮包含在我的电话输入聚合元素，像这样：

The only way I've managed to make sure that the error message would pop when the field is empty is by including my form and my button in my phone-input polymer element, like this:

<polymer-element name="phone-input" attributes="phoneNumber">
  <template>
    <form>
    <input id="txtPhoneNumber" type="text" class="field phone-field"
    required placeholder="999-999-9999" maxlength="12" value="{{ phoneNumber }}"/>
    <button value="" id="btnTest">Test</button>
    </form>
  </template>
  <script type="application/dart" src="phone_input.dart"></script>
</polymer-element>

这是可行的，但我最初的目标是创建一个电话输入元素，并且可以包含在任何形式...

This works, but my initial goal was to create a phone-input element that would work on it's own and could be included in any form...

你知道我想做什么是可能的，如果是，我做错了？谢谢！

Do you know if what I'm trying to do is possible at all and if it is, what am I doing wrong? Thanks!

推荐答案

只要在表单标签中加入ID和onsubmit， >

Just add an ID and onsubmit to the form tag, but also declare the button as submit button:

<polymer-element name="phone-input" attributes="phoneNumber">
  <template>
    <form id="myform" onsubmit="return false;">
    <input id="txtPhoneNumber" type="text" class="field phone-field"
    required placeholder="999-999-9999" maxlength="12" value="{{ phoneNumber }}"/>
    <button type="submit" on-click="saveform" value="" id="btnTest">Test</button>
    </form>
  </template>
  <script type="application/dart" src="phone_input.dart"></script>
</polymer-element>

将saveform处理程序添加到phone_input.dart：

Add the saveform-handler to phone_input.dart:

saveform(Event e, var detail, var target) {

  FormElement form = shadowRoot.query('#myform');
  if (!form.checkValidity()) {
    return;
  }

  // handle save
}

点击按钮激活html5表单验证，但也调用saveform处理程序

Click on button activate html5 form validation but also call saveform handler

这篇关于如何在dart聚合物元素上使用HTML5验证？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！