Antd - validateFields only checks current form step - reactjs

Question

I am trying to get form steps to be easily navigable. Users must be allowed to go back by clicking on previous form steps, and go forward if target step and everything in between is filled in and valid.
I got it somewhat working by using something like this but the problem with this one is that validateFields() will only check current step's form. So I can fill in, let's say the first step and jump forward 8 steps because validateFields() only validates the current one and thinks everything is all good.
form.validateFields()
.then(() => {
setCurrentStep(step);
})
.catch((err) => {
console.log(err);
return;
});
So I am trying to get validateFields() to accept an array which contains every form field name that needs to be checked. However, I could not find any documentation for such implementation and the one below always results in resolve.
const handleStepChange = (step) => {
// let user go back to previous steps
if (step <= currentStep) {
setCurrentStep(step);
return;
}
// let user go forward if everything is valid
// if not, force user to use "next step" button
form.validateFields(FORM_FIELDS) // FORM_FIELDS is an array that keeps field names
.then(() => {
setCurrentStep(step);
})
.catch((err) => {
console.log(err);
return;
});
};
And this is how I roughly put together everything:
const [form] = Form.useForm();
const [currentStep, setCurrentStep] = useState(0);
const initialSteps = {
form,
step: (val) => setCurrentStep(val),
nextStep: () => setCurrentStep((prev) => prev + 1),
};
const [steps] = useState([
{
title: 'Personal',
content: <PersonalForm {...initialSteps} />,
},
{
title: 'Details',
content: <DetailsForm {...initialSteps} />,
},
{
title: 'Contact',
content: <ContactForm {...initialSteps} />,
}])
return <Steps
size="small"
current={currentStep}
direction="vertical"
onChange={(current) => handleStepChange(current)}
>
{steps.map((item, index) => (
<Step status={item.status} key={item.title} title={item.title} />
))}
</Steps>
How can I validate make sure to validate each and every form field be it unmounted, unfilled, untouched etc?
Edit:
I also tried tapping in to each step's form obj individually, expecting that each form obj would hold it's own form fields but that did not work either
const handleStepChange = (step) => {
// let user go back to previous steps
if (step <= currentStep) {
setCurrentStep(step);
return;
}
// let user go forward if target step and steps in between are filled in
const validationFields = [];
const stepsInbetween = [];
for (let i = 0; i < step - currentStep; i++) {
const stepCursor = steps[currentStep + i];
stepsInbetween.push(stepCursor);
const stepCursorFields = STEP_FIELDS[stepCursor.content.type.name];
validationFields.push(...stepCursorFields);
}
let isValid = true;
stepsInbetween.forEach((s) => {
s.content.props.form
.validateFields()
.then(() => {})
.catch(() => (isValid = false));
});
if (isValid) setCurrentStep(step);
};

Answer 1

You should use the Form element instead of putting together each field. Ant Design's Form already has built-in data collection, verification and performs validation on every field whether they're touched or not.
This is a skeleton form that implements Form. You will want to wrap each field with Form.Item and then in the Form.Item pass in an object as rules with required=True being one of the entry. Sounds more complicated than it should so here's a snippet:
<Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
<Form.Item
name="note"
label="Note"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item
name="gender"
label="Gender"
rules={[
{
required: true,
},
]}
>
<Select
placeholder="Select a option and change input text above"
onChange={onGenderChange}
allowClear
>
<Option value="male">male</Option>
<Option value="female">female</Option>
<Option value="other">other</Option>
</Select>
</Form.Item>
Any field wrapped by <Form.Item /> with required: true in its rule will be checked and validated. You can also use set up rules to be more complex depending on each field's requirement. An example:
<Form.Item name={['user', 'age']} label="Age" rules={[{ type: 'number', min: 0, max: 99 }]}>
<InputNumber />
</Form.Item>
<Form.Item name={['user', 'email']} label="Email" rules={[{ type: 'email' }]}>
<Input />
</Form.Item>
From its documentation,
Form will collect and validate form data automatically.
So you will save yourself a ton of custom code just by relying on the Form component to handle validation for you based on rules you specify on each Form.Item.
EDIT 1
Based on additional information from the comments, since you've mentioned you already use <Form.Item>, this would help enforce the validation is run when user navigate to other pages through the useEffect() hook. If currentStep is updated, which it is (through setCurrentStep), then run the code within the useEffect() body.
const MultiStepForm = () => {
const [form] = Form.useForm();
const [currentStep, setCurrentStep] = useState(1);
useEffect(() => {
form.validateFields()
.then(() => {
// do whatever you need to
})
.catch((err) => {
console.log(err);
});
}, [currentStep]);
const handleStepChange = (step) => {
// other operations here
...
setCurrentStep(step);
};
...
}

Answer 2

This is because the validateFields method of the form object only validates the fields that are currently rendered in the DOM.
The following is a workaround:
Render them all but only make the selected one visible
const formList: any = [
<FirstPartOfForm isVisible={currentStep === 0} />,
<SecondPartOfForm isVisible={currentStep === 1} />,
<ThirdPartOfForm isVisible={currentStep === 2} />
];
const formElements = formList.map((Component: any, index: number) => {
return <div key={index}>{Component}</div>;
});
...
<Form ...props>
<div>{formElements}</div>
</Form>
Then in the components that are the parts of your form:
<div style={{ visibility: isVisible ? "visible" : "hidden", height: isVisible ? "auto" : 0 }}>
<Form.Item>...</Form.Item>
<Form.Item>...</Form.Item>
</div>