polymer paper-input form.checkValidity()

Question

        <form>
            <paper-input label="Name" name="name"></paper-input>
            <paper-input label="Email" name="email" type="email" required></paper-input>
            <paper-input label="Phone" name="phone" type="tel"></paper-input>
            <paper-input label="Message" name="message" multiline></paper-input>
            <input name="code" value="12345" hidden required>
        </form>
        <paper-fab icon="arrow-forward" on-tap="{{submit}}" style="float:right"></paper-fab>

When I use a regular input for example the hidden one, and I remove the value it correctly tells me the validity is false.

       submit:function(){
            var form = this.shadowRoot.querySelector('form')
            var isValid = form.checkValidity();
            console.debug(isValid)
        },

But if the paper-input email is left blank checkValidity() still registers as valid?

(https://github.com/Polymer/paper-input/issues/75)

PART2:

<polymer-element name="my-name" extends="input" attributes="value" noscript>
    <template>
        <paper-input label="Name" name="name" value="{{value}}"></paper-input>
    </template>
</polymer-element>

<polymer-element name="my-email" extends="input" attributes="value" noscript>
    <template>
        <paper-input label="Email" name="email" value="{{value}}" type="email" required></paper-input>
    </template>
</polymer-element>

<polymer-element name="my-phone" extends="input" attributes="value" noscript>
    <template>
        <paper-input label="Phone" name="phone" value="{{value}}" type="tel"></paper-input>
    </template>
</polymer-element>

<polymer-element name="my-message" extends="input" attributes="value" noscript>
    <template>
        <paper-input label="Message" name="message" value="{{value}}" multiline></paper-input>
    </template>
</polymer-element>

--

<form>
    <input is="my-name">
    <input is="my-email" type="email" required>
    <input is="my-phone">
    <input is="my-message">
    <input name="code" value="12345" hidden required>
</form>

Amazingly this works :D Except for styling? It looks tiny and suddenly I have borders and stuff?

I didn't expect that my suggestion leads to such a solution ;-) Defining a 'new' Shadow DOM might work when you extend a custom element but extending a DOM element and setting a new Shadow DOM implementation might not work (haven't tried but saw some complaints about failing attempts as far as I remember). If you want to stick with core-/paper-input I guess the better attempt is to build a custom form element that utilizes the validation capabilities of core-/paper-input. I think this was considered by the Polymer team as well. I wondered already why they didn't come up with anything yet. — Günter Zöchbauer, Oct 03 '14 at 16:36
Ok see update, it works :) Any suggestions about styling? Try it, it looks very ugly now :) But it does work doh. — Gert Cuykens, Oct 03 '14 at 16:46
Weird. I'll try just out of curiosity but not today anymore, I'm dead tired and its night here already... — Günter Zöchbauer, Oct 03 '14 at 16:49
You should extend 'paper-input' instead of 'input' to have right styling as paper input — zdarsky.peter, Dec 09 '14 at 09:56

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

Polymer elements (except ones that extend HTML input elements - paper- and core-elements input element only embed HTML input elements) aren't recognized as form input elements and can't take part of form validation.

See also paper-button with type="submit" within form doesn't submit?

edited May 23 '17 at 12:11

Community

1
1

answered Oct 03 '14 at 05:11

Günter Zöchbauer

623,577
216
2,003
1,567

polymer paper-input form.checkValidity()

1 Answers1