I am able to move into next step in antd step form even though i have added validation in react.js I have used default validation of antd form
const steps = [
{
title: "Service Address",
content: (
<Form form={form}>
<Card>
<h1>Lead Information</h1>
<Form.Item
rules={[{ required: true }]}
name={"first_name"}
label="First Name"
>
<Input />
</Form.Item>
</Card>
</Form>
},
{
title: "Service Information",
content: "Second-content",
},
And this my map loop to return the steps
return (
<>
<Steps
current={current}
>
{steps.map((item) => (
<Step key={item.title} title={item.title} />
))}
</Steps>
<div className="steps-content">{steps[current].content}</div>
{current < steps.length - 1 && (
<Button type="primary" onClick={() => next()}>
Next
</Button>
)}
)
</>
Can some one please help me with This! Thanks in Advance
Looks like you are not doing it properly, validation only works if you submit a form, otherwise it doesn't trigger the validation.
You need to submit the form with the click of the Next button.
const next = () => {
setCurrent((prev) => prev + 1);
};
const onSubmit = (formValues) => {
console.log(formValues)
next();
};
const steps = [
{
title: "Service Address",
content: (
<Form form={form} onFinish={onSubmit}>
<Card>
<h1>Lead Information</h1>
<Form.Item
rules={[{ required: true }]}
name={"first_name"}
label="First Name"
>
<Input />
</Form.Item>
</Card>
</Form>
)
},
{
title: "Service Information",
content: "Second-content"
}
];
return (
<div className="App">
<Steps current={current}>
{steps.map((item) => (
<Steps.Step key={item.title} title={item.title} />
))}
</Steps>
<div className="steps-content">{steps[current].content}</div>
{current < steps.length - 1 && (
<Button type="primary" onClick={form.submit}>
Next
</Button>
)}
</div>
);
You can see a working example here: https://codesandbox.io/s/upbeat-faraday-o16hj?file=/src/App.js