Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Ensure validation is respected by containing form #50

Open
rnicholus opened this issue Oct 27, 2014 · 0 comments
Open

Ensure validation is respected by containing form #50

rnicholus opened this issue Oct 27, 2014 · 0 comments

Comments

@rnicholus
Copy link

Over the past few months, I've spent quite a bit of time on ajax-form. At this point, it seems to work pretty well. It "submits" all native form fields (via XHR), respects enctype, action, and method attributes common to a bare <form>, and adds a bunch of other stuff that native HTML forms don't offer. Recently, I added support for submission of custom element fields, such as core-input (and related fields), file-input, paper-dropdown-menu, and any other custom element form field with a name attribute and a value property. While validation has been respected on native form fields for some time, I've struggled to respect validation on custom fields. As far as I can tell this is actually not an issue specific to ajax-form. Rather, it affects all form fields inside of any form, provided the form fields are CE with shadowed inputs.

Unfortunately, the underlying form apparently cannot see that a form field is invalid if it exists in the shadow DOM. This is really tricky to support, but I seem to have come up with a method. The solution here, to ensure that invalid shadow DOM form fields prevents form submission, is to create a "hidden" delegate input in the light DOM that mirrors the validity of the shadowed form field. Another benefit of this approach is that the browser (if supported) will also render a pop-up with the customValidationMessage when the form submit is held up due to an invalid CE form field. If this "hidden" delegate is positioned directly next to the CE, the pop-up seems to target the CE itself.

I have made appropriate changes in another Polymer CE I created, file-input in rnicholus/file-input#19, and that seems to work well with ajax-form now, in terms of validation support. Locally, I've also made the proper adjustments to core-input to ensure validation is respected by a <form> during the submit attempt.

Respecting validation of CE form fields is currently a big issue (IMHO) and not yet solved by any other method (that I am aware of). My solution, while a bit unsettling, appears to be the only way to tackle this, as far as I can tell.

I'm wondering what your thoughts are on this. I'm certainly open to discuss further, and am even willing to open up a pull-request with my changes to core-input (which likely will elicit further discussion).

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant