Having input in Shadow DOM validate on form submission

[Joe Adams]

I am using Polymer Web Components and my application targets Chrome. On my form, outside the Web Components I have an input type='number', when I enter 'a' into the input and submit the form, I get a tooltip that says "Please enter a number."

However, I have another input type="number" that is in the Shadow DOM of a web component. When I enter 'a' into that field and submit the form, Is there any not-too-hacky way to get this functionality to work in Web Component?

Alternately can I have a Web Component that does a 'submit' when you click it or click enter, that also fires all my validation rules when it is activated?

Thanks,

Joe

P.S.  I also need to make something like the tagging functionality that allows you to tag topics in Google Groups when you make a post.  Is that open source code that I can lift?

[Eric Bidelman]

This was recently asked on StackOverflow :)

FWIW, there was a discussion on this topic a while back (custom input elements participating in <form> submission). The general consensus was that it's easy enough to create and submit forms using FormData() and AJAX.

I agree that it would be nice to stick <paper-input>/<core-input> inside a <form> and have it validated and submitted. The element needs to inherit from standard <input> for it to become part of the submission flow. However, one reason our input elements don't inherit from the standard input elements is that they're notoriously difficult to style.

I tried experimenting what this could like but didn't get very far: http://jsbin.com/sotaqire/10/edit. While <input is="test-element" name="doisubmit"> does get submitted by the form, but the HTML5 Constraint Validation API doesn't pick up the custom element.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/ea57c6d8-f492-44ea-874b-a34d0472f3e2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[raygar...@gmail.com]

Seems like the best solution might be to create a 0x0 opaque text input (without a name attribute) next to the custom form field.  If the custom form field is invalid, call setCustomValidity("some invalid message"); on the opaque field.  In essence, make sure this "dummy" field is marked as invalid when the CE is invalid, and reset to valid when the CE is valid again.  

When the form is submitted, if this convention is followed, the browser will reject the submission and a visual cue will be added by the browser on the edge of the invalid CE field (in all browsers other than Safari, since Safari doesn't include any UI support for the HTML5 validation API.  One problem with this approach is the fact that you won't be able to easily link the validation failure to the custom element.  But perhaps this can be overcome with some sort of convention.  Say, a customElement property on the "dummy" input that can contain a reference to the actual CE.  

I'm finding this to be important to supporting the constraints API in the ajax-form element I've developed, and intend to follow these conventions in a CE form field I developed as well (file-input) so that ajax-form can recognize an invalid file-input (due to aborted form submission) in browsers with shadow DOM support.

If this can be an accepted approach for CE form fields, then I think we need to agree on a custom property name for the dummy field, or at least some convention for programmatically getting a handle on the invalid CE, given the dummy field.  

[Rob Dodson]

Ray - I say try the 0x0 trick and see how far you get with it. It's a bummer to have to hack around like that :\

[raygar...@gmail.com]

I’ll try it out on file-input first.  If that works out, I’ll probably open up a PR for paper/core-input.