Async Validation Handlers in Forms

The Frigade Forms SDK now supports asynchronous validation between steps/pages in a form using the validationHandler prop on the <FrigadeForm /> component. We heard from developers that when working with forms in Frigade, it's often useful to block the user from going to the next step until an async call has completed. For instance, you may want to make a database or API call and ensure that this succeeds before letting the user continue.

Here it is in action in our own onboarding flow where we use a <FrigadeForm /> (made extra slow for dramatic effect):

As the user clicks "Continue", we use the validationHandler to send the data to our database and wait for the call to succeed (hence the loading indicator in the button). This is an example snippet of what this could look like in your code base:

<FrigadeForm 
  flowId="flow_HBHCxYG8G7BUtcMb"
  validationHandler={async (data) => {
    // Do some network call or async process
    const result = await myValidationFunction(data);
    if (!result) {
      return `An error occurred: ${result}`;
    }
    
    return true;
  }}
/>

To get started with async validation in Frigade Forms, simply bump @frigade/react to version 1.35.29.