dart - 如何在 Dart 聚合物元素上使用HTML5验证？

Question

我正在尝试创建自己的自定义聚合物元素，以强制执行指定的输入蒙版。我创建了这个元素:

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

如您所见，我元素内的输入字段标记为required属性。因此，当我将电话输入元素放入表单中时，我希望它能够强制执行此约束。

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

但是，当我这样做时，即使我的字段中没有值，我也可以随意发布该表单。

我设法确保在字段为空时弹出错误消息的唯一方法是在电话输入聚合物元素中包含表单和按钮，如下所示:

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

这项工作可行，但我的最初目标是创建一个电话输入元素，该元素可以单独使用，并可以以任何形式包含在内...

您知道我想做的事情是否完全可能吗，如果可以，我在做什么错呢？谢谢!

Answer 1

只需添加一个ID并在表单标签上提交，然后将按钮声明为“提交”按钮即可:

<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-handler添加到phone_input.dart:

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

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

  // handle save
}

单击按钮激活html5表单验证，还可以调用saveform处理程序