即使我在 react.js 中添加了验证，我也能够以 antd 步骤形式进入下一步

Question

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

Answer 1

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