Async Validation Handlers in Forms

Async Validation Handlers in Forms

Async Validation Handlers in Forms

Aug 31, 2023

Aug 31, 2023

Aug 31, 2023

Christian Mathiesen

Christian Mathiesen

Christian Mathiesen

X Icon
Facebook Icon
Linkedin Icon
X Icon
Facebook Icon
Linkedin Icon
X Icon
Facebook Icon
Linkedin Icon

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.

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.

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.

Frigade Logo

Get started today

Join thousands of users. No credit card required.

Get Started Img
Frigade Logo

Get started today

Join thousands of users. No credit card required.

Get Started Img
Frigade Logo

Get started today

Join thousands of users. No credit card required.

Get Started Img