Expose form-level valid prop on client side for submission prevention?

[brophdawg11]

Still thinking about whether this is needed, but right now when you submit to the server you get back a form-level valid prop. But since all of our validation is field-level on the client there's a not exactly an easy way to prevent submission on failed client side navigation. Arguably, this is less-common with real-time inline error messaging but it's still nice to have.

<FormProvider ...>
  <form onSubmit={(e) => {
    // what to check here?
    if (!valid) {
      e.preventDefault();
    }
  }}>
    ...
  </form>
</FormProvider>

If you're not using custom validations you could check directly via the DOM:

<form onSubmit={(e) => {
  let inputs = Array.from(e.currentTarget.elements);
  let isInvalid = inputs.some((e) => e.validity?.valid === false);
  if (isInvalid) {
    e.preventDefault();
  }
}}>

But that doesn't account for customValidations nor does it give you a way to disable a submit button when the form is invalid. So I think this is likely going to require something at the FormProvider level.