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>

ご覧のとおり、要素内の入力フィールドは必須属性でマークされています。したがって、 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

form タグに 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 に答える