1

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>

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!

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
user2921526
  • 11
  • 1

1 Answers1

0

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>

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
}

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

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
Gerald Leeb
  • 61
  • 6
  • Well, this works but it's not what I was trying to do. I want my button and my phone field NOT to be in the same polymer-element, like in my 2nd code snippet. But it seems that this way, the form can't "drill into" my phone-input polymer-element and see that it contains a field with HTML5 validations tags. When both are in the same polymer-element and that this element contains the form, the html5 validations work fine without having to do anything special. – user2921526 Oct 27 '13 at 13:50
  • Hello Gerald, Did you find a solution for this problem. I have the same question now. – st_clair_clarke Dec 07 '13 at 12:21
  • You can post an issue at https://code.google.com/p/dart/issues/list for better form support with polymer elements or do the processing in your own code like in this post [Forms, HTTP servers, and Polymer with Dart](http://blog.sethladd.com/2013/09/forms-http-servers-and-polymer-with-dart.html). If you have specific problems with this you may ask a more specific question. – Günter Zöchbauer Dec 07 '13 at 21:48
  • The code at the above URL from ZOechi is no different from the primary question above, and so does not help. This aspect of form support by Dart is an issue and probably should be sorted out with some priority. Given that the question was not posted by me I would hesitate to post an issue and hopes the person would do so. – st_clair_clarke Dec 07 '13 at 23:46