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和onsubmit，同时将按钮声明为提交按钮：

<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处理程序

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

1 个答案: