Custom form submit handler in React Forms

[anu-rock]

We are trying to leverage the power of Sitecore 9 Forms in our JSS React application. We have done a couple of POCs to create forms in CMS and display them in our React app, and are happy with what we have achieved so far. We followed the official docs for that https://jss.sitecore.com/docs/techniques/forms. That is, in React we used the sitecore-jss-react-forms package to display the form. Almost everything worked fine except form submission.

The Form component imported from sitecore-jss-react-forms does not provide a way to override the default form submit handler (although it provides a way to override the form action endpoint via a custom form fetcher). Basically, we want to perform client-side form validation and prevent form submission in case of errors. At the same time, we do not want to impact tracking.

As per code comments here, our two requirements seem to be mutually exclusive:

https://github.com/Sitecore/jss/blob/e9583b958db00965e657f73139256389dc0f31e2/packages/sitecore-jss-react-forms/src/components/form.tsx#L227-L228

What is the recommended way to solve this given that our form will submit to a custom endpoint rather than Sitecore?

[anu-rock]

Gentle bump.

[nickwesselman]

Not sure how to help on this one, we designed JSS Forms to be used with... Sitecore Forms. Rather than a custom endpoint, why not create a custom save action?

[layonthebeech]

Does the jss sitecore forms react package perform client side validation?