Ant Design: input validation with Forms

user_8295423 0
Viewed 8340

I need input validation in app build with react and ant.design. As I see from the ant documentation the way to validate input is to use Form tags.

I wonder is there any convenient way to integrate yup with ant.design library to have the same validation results, like highlighting field with incorrect input, and write error message under it?

Or I just have to implement error displaying manually?

antd yup reactjs validation
1 Answers

No need to use yup the antd validation is sufficient just you've to wrap your form with Form element that has prop named form that takes a value from useForm hook and add your validation rules in rules prop of Form.Item that could wrap any input element:

import { Form, Input, Button, Select } from 'antd';
const { Option } = Select;
....

const Demo = () => {
  const [form] = Form.useForm();

  
  return (
    <Form  form={form} >
      <Form.Item
        name="note"
        label="Note"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input />
      </Form.Item>
      .....
    </Form>
  );
};

for more details check this

user_81728570
Related