CODEWITHSUNDEEP
reactjsvalidationantdyup
Aleksandr Savvopulo
Aleksandr Savvopulo

Reputation: 157

Ant Design: input validation with Forms

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?

Upvotes: 2

Views: 25727

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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

Upvotes: 2

Related Questions