How to properly validate form values with react-final-form multiple screen?

Question

I'm using react-final-form together with material ui, mui-rff and yup for form validations. I have multiple screens or should I say WIZARD SCREENS each screen has HTML form elements input and radio button.

all HTML form elements are required meaning they can't proceed to next screen unless user input data or click on it.

At the moment I have 2 problems here.

1. The next button is not working as expected. I expect when current screen has value valid: false in short has errors next button is disabled so can't proceed to next screen. when screen value valid: true can proceed to next screen.
2. The form validation is doing advanced validation for the next screen without clicking next button. so validity value is always valid:false. That's what I have noticed.

Here's my partial code, see codesandbox for full demo of this.

    import { Form } from "react-final-form";
    import { makeValidate } from "mui-rff";
    import * as yup from "yup";

 

     const initialValues = {
        option: "optionB",
        user: {
          fname: "",
          lastname: "",
          motto: "",
          country: ""
        },
        status: ""
      };
    
      const validationSchema = yup.object({
        option: yup.string().required("option required"),
        user: yup.object({
          fname: yup.string().required("fname required"),
          lastname: yup.string().required("lastname required"),
          motto: yup.string().required("motto required"),
          country: yup.string().required("country required")
        }),
        status: yup.string().required("status required")
      });
    
      // makeValidate is a mui-rff function
      const validate = makeValidate(validationSchema);



       <Form
       initialValues={initialValues}
       validate={validate}
       keepDirtyOnReinitialize
       initialValuesEqual={() => true}
       onSubmit={() => console.log("submitted")}
       render={({ handleSubmit, values, valid, errors }) => (
       <form onSubmit={handleSubmit}>                    
       <Button
            disabled={activeStep === 0}
            onClick={handleBack}
            className={classes.backButton}
       >
                          Back
                        </Button>
                        <Button
                          variant="contained"
                          color="primary"
                          disabled={!valid} 
// normally if the current has no error "valid" becomes true , false otherwise so to disabled if valid is false, in short you can't proceed. 
                          this part is buggy not working at all.
                          onClick={handleNext}
                        >
                          {activeStep === steps.length - 1 ? "Finish" : "Next"}
                        </Button>
                   </form>
                  )}
                />


    --------------------------- screens ----------------------------------------------
  

  // screen 1
 import { Radios } from "mui-rff";
 const Screen1 = () => {
 return (
       <div>
               This is Screen1
           <br />
           <br />
           <Radios
           label="select option"
           name="option"
           formControlProps={{ margin: "none" }}
           radioGroupProps={{ row: true }}
           data={[
           { label: "optionA", value: "optionA" },
           { label: "optionB", value: "optionB" },
           { label: "optionC", value: "optionC" }
           ]}
            />
        </div>
         );
    };
    
    // screen 2
    import { TextField } from "mui-rff";
    const Screen2 = () => {
      return (
        <div>
          This is Screen2
          <br />
          <br />
          <TextField name="user.fname" variant="outlined" required={true} />
          <TextField name="user.lastname" variant="outlined" required={true} />
          <TextField name="user.motto" variant="outlined" required={true} />
          <TextField name="user.country" variant="outlined" required={true} />
        </div>
      );
    };
    
    // screen 3
    import { TextField } from "mui-rff";
    const Screen3 = () => {
      return (
        <div>
          This is Screen3
          <br />
          <br />
          <TextField name="status" variant="outlined" required={true} />
        </div>
      );
    };

codesandbox

links:

• mui-rff
• react-final-form
• yup

I can confirmed yup validation is working well like you seen on this screenshot below.

Answer 1

Wizard form is quite troublesome to validate. I haven't solved the problem at all. My workaround is instead of <form /> level validation I have settled in <Field /> level validation.

In mui-rff you can pass react-final-form props in my case I pass <TextField fieldProps={{ validate: isRequired }} /> where isRequired my custom validation