You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.
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).
The text was updated successfully, but these errors were encountered:
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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
, andmethod
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 aname
attribute and avalue
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).
The text was updated successfully, but these errors were encountered: