1

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

<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属性。因此，当我将 phone-input 元素放入表单时，我希望它能够强制执行此约束。

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

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

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

4

1 回答 1

0

只需在表单标签中添加一个 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 处理程序

于 2013-10-27T06:06:09.747 回答