How to Create and Validate Ant Design Forms | Antd Form Validation | React Js

#antd #reactjs #form #validation #validate
In this video tutorial I have explained how to Create and Validate Ant Design Forms in React Js app

This video focuses on
- How to create and layout forms using different component from Ant Design UI library
- How to use antd form items and its props like field name and field labels
- How to add rules to antd form fields/items
- How to make a antd form field required
- How to add custom field validation logic
- How to get values from antd form fields
- How to get fields which have errors
- How to validate antd form and show errors under form fields
- How to make a antd form field optional
- How to validate optional antd form fields
- How to add feedback to antd form fields
- How to use different antd components like checkbox, input, select, date picker and add validations on them
- How to validate email fields
- How to validate url, link, or website fields using antd form validations
- How to add logic to match passwords
- How to add minimum length validation on antd form fields
- How to get values of form fields in onFinish function of ant design form APIs
- How to get values of form fields in onFinishFailed function of ant design form APIs along with erroneous fields

Happy Coding!

[parazinho]

Man, I'm from Brazil and I was struggling to understand it. Thank you so much bro

[nicholasbassey]

Thank you Aamir!!. You just made ANTD my favourite UI library.

[msl]

Super! You just saved me with your tutorial! Many thanks! From Russia with gratitude!

[xfilercuba]

Great video. Your explanations are what's missing in the ant design documentation 😅 Thank you for taking the time to explain all this. Thx to you I'm now using ant design all the time.
Quick question. How do I clear those validation checkmarks after the form has been submitted? Tried form.resetFields() but that didn't do it 🙄

[vuchien]

i'm from Vietnam, thank for your tutorial!

[muhammadharis]

hi. I'm having problem in getting formvalidation in antd editable table using antd select component. could you plz help regarding the usage of select component in antd editable table. thanks

[leandrogabrielmorochosoca]

Hi Aamir, I have a question. How can I set the value of Form.Item to a different ReactNode? I mean, for example:
<Form.Item name="username" >
<ReactNode>
</Form.Item>

const ReactNode = ({valueItem}) => (...)
Is it possible?

[maximilianoamodei]

Great video! Quick question what would you suggest if you neede, for example, every input to be different. This is to say, uniqueness among all inputs, kind of the same dependency we have with passwords, but checking the opposite, not equal, against every other field.
Do I need to declare dependencies in every other field and get all existing values inside a custom validator?

[IMegz]

This is such a great explanation, Thanks so much bro ♥

[samiullahsheikh]

I explore the antd documentation for validation rules but did not find all available rules.

Can you please provide the link of documentation page link where rules are listed?

[vigneshinvicible]

Hi sir in this video how to add email validation for valid format in ui... Please tell

[adityaverma]

thnx bro, your video is so helpful for developers...

[utkarshtripathi]

Hey Amir,
Can you please make a video on add Dynamic Row n Columns in ANtd Forms, it would be great ... btw i love your content, your videos and answers helped me a lot .

[pulinitilanka]

Thank you very much. This video is more helpful for my software project. And also can you explain how to sent a verification email and how to add google captcha into this form.

[dnic]

These are amazing videos... I am learning a ton. Do you have a video on login and transition to home screen?

[chandrasatyannarayanayalam]

Once correct details are submitted and after pressing the registration button how to clear the input field…..your code is still showing in the input file after clicking the button

[abuzain]

good brother every thing is clear like a sunny day

[samiullahsheikh]

Well explained. Simple and to the point explanation.

Keep producing good content. 👍

[ronaldoespinoza]

good video, how can I use the defaultValue, in the antd form?, or how is it used?

[anjalidogra]

Great and helpful video, thankyou so much