Support "valid" and "invalid" events in fieldsets

Background: I’m trying to build a multi-page checkout flow (demo)

In order to submit all inputs together in the last step, all form inputs are written to amp-state and then added to the last form via hidden inputs. For each step, the next button is enabled once all form inputs are valid.

To avoid duplicating validation logic in amp-bind expressions, I’m binding the button’s disabled state to a state variable, e.g.: shippingAddressValid which tracks the form’s validation status using the valid / invalid event:

<form id="shippingAddressForm" 
      method="post" 
      action-xhr="https://dummy.endpoint.as.form.is.never.submitted" 
      custom-validation-reporting="as-you-go" 
      target="_blank" 
      on="valid:AMP.setState({ shippingAddressValid: true });
              invalid:AMP.setState({ shippingAddressValid: false })">
  <input ...>
</form>
<button disabled [disabled]="!shippingAddressValid">...</button>

Problem: I have to wrap all inputs into a form to be able to access the valid/invalid events. However, the form will never be submitted as the inputs are only written to amp-state. This is not very intuitive and might cause unintended side-effects.

Proposed Solution: support validation events for fieldsets.

Fieldsets already support disabling all nested inputs (a feature I need in my sample as well). This makes them a good place to also support validation events. The snippet above could then be simplified to:

<fieldset on="valid:AMP.setState({ shippingAddressValid: true });
                        invalid:AMP.setState({ shippingAddressValid: false })">
  <input ...>
</fieldset>
<button disabled [disabled]="! shippingAddressValid">...</button>

//cc @choumx @ericlindley-g

[aghassemi]

A bit of related discussion here: https://github.com/ampproject/amphtml/issues/11691

tl;dr: Spec-wise, browsers always assume fieldsets are valid even if all of their inputs are invalid. If we end up doing this, we should reconsider doing https://github.com/ampproject/amphtml/issues/11691 as well.

/cc @cvializ

[sebastianbenz]

I still think that this would be really good to have.