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 garstasio/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).
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, andmethodattributes 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 anameattribute and avalueproperty. 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 garstasio/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).