Add Validation To Multi-Step Form

[lilyntalmers]

I am trying to create a multi-step React pricing Form. I have already created the form and the pricing part.

But the user can just avoid the question and see the next part by just pressing next. So, I need some kind of validation that will prevent the user from going to the next step by completing the previous step. Can't seem to have any idea how to create one.

• Step 1: Radio Button Checking (Validation Not Needed)
• Step 2: Filling Country, City, Zip Code (Validation Needed)
• Step 3: Filling Email (Validation Needed)

I have created a working Code Sandbox. Here is the link.

Asked on some other forums and received this code.

import { FC, useState, FormEvent } from 'react';
enum FormPage {
  USER = 'USER',
  PAYMENT = 'PAYMENT',
}
const App: FC = () => {
  const [page, setPage] = useState(FormPage.USER);
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [creditCardNumber, setCreditCardNumber] = useState('');
  const [pageErrors, setPageErrors] = useState<{
    page: FormPage;
    errors: Error[];
  } | null>(null);
  function handleUserPageSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const errors: Error[] = [];
    if (firstName.trim().length === 0) {
      errors.push(new Error('First name is required.'));
    }
    if (lastName.trim().length === 0) {
      errors.push(new Error('Last name is required.'));
    }
    if (errors.length === 0) {
      setPageErrors(null);
      setPage(FormPage.USER);
    } else {
      setPageErrors({ page: FormPage.USER, errors });
    }
  }
  function handlePaymentPageSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const errors: Error[] = [];
    if (creditCardNumber.trim().length === 0) {
      errors.push(new Error('Credit card number is required.'));
    }
    if (errors.length === 0) {
      setPageErrors(null);
      window.alert('Success!');
    } else {
      setPageErrors({ page: FormPage.PAYMENT, errors });
    }
  }
  const errorList =
    pageErrors && pageErrors.page === page ? (
      <ul>
        {pageErrors.errors.map((error) => (
          <li key={error.message}>{error.message}</li>
        ))}
      </ul>
    ) : null;
  if (page === FormPage.USER) {
    return (
      <form onSubmit={handleUserPageSubmit}>
        {errorList}
        <label>First name</label>
        <input
          value={firstName}
          onChange={(event) => setFirstName(event.currentTarget.value)}
        />
        <label>Last name</label>
        <input
          value={lastName}
          onChange={(event) => setLastName(event.currentTarget.value)}
        />
        <button>Submit</button>
      </form>
    );
  } else {
    return (
      <form onSubmit={handlePaymentPageSubmit}>
        {errorList}
        <label>Credit card number</label>
        <input
          value={creditCardNumber}
          onChange={(event) => setCreditCardNumber(event.currentTarget.value)}
        />
        <button>Submit</button>
      </form>
    );
  }
};

Already tried multiple times to this implement parts of this on my existing code but couldn't make it work. Does anybody know better way than this? Or can anyone please help me to implement this code on my existing code?

I don't want to use Formik. So, please don't suggest Formik.

[bluebill1049]

have a look at this section: https://react-hook-form.com/advanced-usage#WizardFormFunnel

I made (not a professional video maker, please excuse the quality...) a short video tutorial as well: https://react-hook-form.com/advanced-usage#WizardFormFunnel

[lilyntalmers]

I just tried it out. It does not work for me. As the user need to go from one step to another before submitting the details.

Thanks a lot answering.

[bluebill1049]

As the user need to go from one step to another before submitting the details.

you can validate each step and collect users' data and submit your data at the last step right? because you got all the validated data.

[lilyntalmers]

I believe that's not a viable solution as that will add an extra step for the user. It is supposed to be a lead capture and it should grab the data with as less step as possible.

Thanks a lot for creating and maintaining this amazing repository.

[lilyntalmers]

So, is there any way to validate each step without adding an extra step?

[mdestafadilah]

Any update? please inform..

[leapful]

@lilyntalmers @mdestafadilah @bluebill1049

May I suggest my solution for this case ?

https://codesandbox.io/s/react-hook-form-resolver-forked-jdy7b?file=/src/App.tsx

The idea is to use "resolver" and its parameter "context" to keep track on step number and leave the handling of previous and next action to onValid() callback of method handleSubmit().

Whenever end-user clicks on previous or next button, it will set an identifier to resolver context to determine what action (Previous or Next) is performed and also the step number. The resolver is now a global validation for the whole form but already has step number to apply target validation for each step.

If validation is failed, onValid() cannot be called and the step number is not changed, therefore end-user needs to solve validation error in order to continue the form wizard.

[oualidmaz]

Here is an example with react-hook-form + Material UI Stepper + validation on each step using YUP :

codesandbox :

https://codesandbox.io/s/unruffled-river-9fkxo

Demo :

[ArianHamdi]

Thanks for sharing this solution but I want to change validation's mode to onChange if await trigger() returned false. just like revalidateMode in useForm() that changes validation strategy when inputs with errors get re-validated after a user submits the form (onSubmit event).

The only way I can achieve this behavior is by using separate useForm() for each step in the form.

I would like to know which is the best practice to handle multi-step forms; use a useForm() for all steps and using await trigger() to validate each step or use a separate useForm() for each step.

[Gr1mmz]

@ArianHamdi Hi! I found a way. Check my message below https://github.com/orgs/react-hook-form/discussions/4028#discussioncomment-5906326

[I-am-abdulazeez]

Hi @bluebill1049 I'm working with ionic-framework, Can we have an example?

Here is an example with ionic 6, using the swiper/react component but I can't find a way to disable the continue button when the first step is not valid.

https://github.com/aaronksaunders/react-hook-form-wizard-example.

[bluebill1049]

This video may helps: https://www.youtube.com/watch?v=Kdgu075v2fM

[Gr1mmz]

Hi to everyone. I foung a great way to get this part of validation easy.

First of all - you don't need any something special code for it!

1. Overall, entire form looks simple, just like example in doc's:

<form onSubmit={handleSubmit(onSubmit)}>
    {step === '1' && <Form1 />}
    {step === '2' && <Form2 />}
    {step === '3' && <Form3 />}
</form>

2. Your <button> in first step looks simple too:

<button onClick={handleSubmit(handleClick)}>
   Next
</button>

Here you need to wrap your click handler into handleSubmit by RHF for validation triggering.

3. After you need to check validation inside handleClick function like this:

if (!isValid) return;

4. And if form is valid you need to do this (inside handleClick function after isValid condition of course):

reset({ ...getValues() }, { keepValues: true });
setStep('2')

5. That's it:

const handleClick = () => {
    if (!isValid) return;

    reset({ ...getValues() }, { keepValues: true });
    setStep('2')
}

reset() with parameters refresh your form validating with SAVING all values! On next step first validation will be triggered ONLY on submit, and will be revalidating on change just like first render of your form.

Enjoy!

[marcebdev]

As far as I can tell your example will only be valid if either you've made the fields optional... or you're somehow only validating the specific fields in that step. It would be helpful to know how you're achieving that. The trigger function allows that, but you're using handleSubmit so I'm quite curious.

[libialany]

https://gist.github.com/e605d58bcc578c8b6c919750f2ff1e58.git, I created an example, I hope It can help, i used : react hook form, MUI, usecontext Hook.

[liel-almog]

How can I set the mode to "onSubmit" and the reValidationMode to "onChange" and make it work.
Currently my mode is always "onChange" and I don't really like it.
Thanks for the code sand box. It was really helpful!

Another question, how can I send all form in the last section.

const methods = useForm<InnerReport>({
    resolver: zodResolver(currentValidationSchema),
    shouldUnregister: false,
    mode: 'onChange',
});

I want to change the 'next' to 'submit' in the last section. The problem being the handle submit function only return to me the last step schema (this is the good behavior). I don't know what is the best practice - change the form schema to the whole form or sent the values with the getValues function. I would love any help,
May be @oualidmaz you can help.

[isaackoz]

For a Typesafe solution and one that doesn't use an array of validations, here is another way to do this. This provides full type-safety and doesn't let you go to the next step unless the current step's inputs are valid. I'm using Zod here, but the idea should be the same for other validation libraries. We use an object of validations for each step and then trigger that specific object explicitly.

1. Create the schemas

const wizardOneSchema = z.object({
  firstName: z.string().min(2),
  lastName: z.string().min(2)
})

const wizardTwoSchema = z.object({
  age: z.number().int()
})

const wizardThreeSchema = z.object({
  email: z.string().email()
})

export const wizardSchema = z.object({
  stepOne: wizardOneSchema,
  stepTwo: wizardTwoSchema,
  stepThree: wizardThreeSchema
})

export type WizardSchema = z.infer<typeof wizardSchema>;

2. Create the parent form

import { useState } from "react";
import {
  Controller,
  FormProvider,
  useForm,
  useFormContext,
} from "react-hook-form";
import { type WizardSchema, wizardSchema } from "./";
import { zodResolver } from "@hookform/resolvers/zod";

export function WizardForm() {
  // Initial step to 1
  const [activeStep, setActiveStep] = useState(1);
  const methods = useForm<WizardSchema>({
    shouldUnregister: false,
    mode: "onChange",
    resolver: zodResolver(wizardSchema),
  });
  const { handleSubmit } = methods;

  const onSubmit = (data: WizardSchema) => {
    console.log(data);
  };

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
      {activeStep === 1 && <WizardStepOne setStep={setActiveStep} />}
      {/* Add rest of steps here */}
      </form>
    </FormProvider>
  );
}

3. Create each step as their own component

We're using form context here so we can separate each step into its own component.

function WizardStepOne({ setStep }: { setStep: (step: number) => void }) {
  const { control, trigger, register } = useFormContext<WizardSchema>();

  const onNext = async () => {
    // Triggers only the validation schema for stepOne
    const isValid = await trigger("stepOne");
    if (isValid) {
      setStep(2);
    }
  };

  return (
    <>
      {/* With a controller (for example to use with a UI library) */}
      <Controller
        control={control}
        name="stepOne.firstName"
        render={({ field, fieldState }) => (
          <>
            <input {...field} placeholder="First Name" />
            {fieldState.invalid && <span>{fieldState.error?.message}</span>}
          </>
        )}
      />
      {/* Or as you normally would */}
      <input {...register("stepOne.lastName")} placeholder="Last Name" />
      <button type="button" onClick={onNext}>
        Next
      </button>
    </>
  );
}

4. Create the rest of the steps similar to above

5. On the final step, create a button of type 'submit'

// ...confirm/final step/etc.
<button type="submit">
     Submit
</button>

This will trigger the onSubmit in the parent form which will have the data of each field.

[nwazuo]

Works great for me. Thank you.

To future readers, don't repeat my mistake of using z.string() (not made in the above code) without chaining a min (or other validation method) call. As a zod newbie, I didn't know that zod would validate an empty string as valid with just z.string() and this took me quite some time to debug and figure out.

See: colinhacks/zod#2466

[MJUrian-Learner]

For a Typesafe solution and one that doesn't use an array of validations, here is another way to do this. This provides full type-safety and doesn't let you go to the next step unless the current step's inputs are valid. I'm using Zod here, but the idea should be the same for other validation libraries. We use an object of validations for each step and then trigger that specific object explicitly.

1. Create the schemas

const wizardOneSchema = z.object({

  firstName: z.string().min(2),

  lastName: z.string().min(2)

})



const wizardTwoSchema = z.object({

  age: z.number().int()

})



const wizardThreeSchema = z.object({

  email: z.string().email()

})



export const wizardSchema = z.object({

  stepOne: wizardOneSchema,

  stepTwo: wizardTwoSchema,

  stepThree: wizardThreeSchema

})



export type WizardSchema = z.infer<typeof wizardSchema>;

2. Create the parent form

import { useState } from "react";

import {

  Controller,

  FormProvider,

  useForm,

  useFormContext,

} from "react-hook-form";

import { type WizardSchema, wizardSchema } from "./";

import { zodResolver } from "@hookform/resolvers/zod";



export function WizardForm() {

  // Initial step to 1

  const [activeStep, setActiveStep] = useState(1);

  const methods = useForm<WizardSchema>({

    shouldUnregister: false,

    mode: "onChange",

    resolver: zodResolver(wizardSchema),

  });

  const { handleSubmit } = methods;



  const onSubmit = (data: WizardSchema) => {

    console.log(data);

  };



  return (

    <FormProvider {...methods}>

      <form onSubmit={handleSubmit(onSubmit)}>

      {activeStep === 1 && <WizardStepOne setStep={setActiveStep} />}

      {/* Add rest of steps here */}

      </form>

    </FormProvider>

  );

}

3. Create each step as their own component

We're using form context here so we can separate each step into its own component.

function WizardStepOne({ setStep }: { setStep: (step: number) => void }) {

  const { control, trigger, register } = useFormContext<WizardSchema>();



  const onNext = async () => {

    // Triggers only the validation schema for stepOne

    const isValid = await trigger("stepOne");

    if (isValid) {

      setStep(2);

    }

  };



  return (

    <>

      {/* With a controller (for example to use with a UI library) */}

      <Controller

        control={control}

        name="stepOne.firstName"

        render={({ field, fieldState }) => (

          <>

            <input {...field} placeholder="First Name" />

            {fieldState.invalid && <span>{fieldState.error?.message}</span>}

          </>

        )}

      />

      {/* Or as you normally would */}

      <input {...register("stepOne.lastName")} placeholder="Last Name" />

      <button type="button" onClick={onNext}>

        Next

      </button>

    </>

  );

}

4. Create the rest of the steps similar to above

5. On the final step, create a button of type 'submit'

// ...confirm/final step/etc.

<button type="submit">

     Submit

</button>

This will trigger the onSubmit in the parent form which will have the data of each field.

Can it be used on shadcn?

[leonardomso]

This worked, thank you @isaackoz!