How to validate step 2 form of useStepsForm if current step is 1 but I click step 3

How to validate step 2 form of useStepsForm if current step is 1 but I click step 3?

2 Replies

Hi @tingadev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To validate step 2 of the form when the current step is 1 and you click on step 3 using useStepsForm, you can utilize the validate option in the hook configuration. This allows you to define custom validation logic for each step. Here's how you can implement this:

const {
  // ... other destructured values
  steps: { currentStep, gotoStep },
} = useStepsForm<IPost, HttpError, FormValues>({
  // ... other options
  validate: (values) => {
    if (currentStep === 1) {
      return {
        status: values.status ? null : "Status is required",
      };
    }

    // Add validation for other steps as needed
    return {};
  },
});

const {
  // ... other destructured values
  steps: { currentStep, gotoStep },
} = useStepsForm<IPost, HttpError, FormValues>({
  // ... other options
  validate: (values) => {
    if (currentStep === 1) {
      return {
        status: values.status ? null : "Status is required",
      };
    }

    // Add validation for other steps as needed
    return {};
  },
});

In this example, the validate function checks if the current step is 1 (which corresponds to step 2 in the UI, as steps are zero-indexed). If so, it validates the status field. You can add more validation logic for other fields in step 2 as needed. When you click on step 3, the gotoStep function will be called, which internally uses this validation logic. If the validation fails, the form will not proceed to step 3. You can then use the gotoStep function in your UI to handle step navigation:

<Button onClick={() => gotoStep(2)}>Go to Step 3</Button>

<Button onClick={() => gotoStep(2)}>Go to Step 3</Button>

This approach ensures that the form fields in step 2 are validated before allowing navigation to step 3, even if the current step is 1. For more detailed information and examples, you can refer to the useStepsForm documentation (https://refine.dev/docs/ui-integrations/mantine/hooks/use-steps-form/#usage). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@761921731505946634> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

How to validate step 2 form of useStepsForm if current step is 1 but I click step 3

Did you find this page helpful?