Form Validation Task

Dear students,

Please use your ReactJS skills to Build a web application that allows users to submit data through a form. Utilize Formik and Yup for form management and validation, Material UI for the UI components.

Task Instructions

Please follow the steps below to complete the task:

Create a form with the following fields:

• Name (text input)
• Email (text input with email validation)
• Message (textarea)
• Phone number

Use Formik to manage the form state and handle form submissions. Implement Yup schema validation to ensure that:

• Name is required and should be at least 3 characters long.
• Email is required and should be a valid email address.
• Message is required and should have 40 min characters and 255 max characters.
• Phone number should be a number that is valid in Iraq.

Use Material UI to style and layout your form components. Ensure the form is visually appealing, user-friendly, and responsive.

Extra Tasks (Optional) - Formik and Yup Challenges:

1. Create a custom Formik field component: Implement a custom Formik field component for a specific input type, such as a date picker or a file uploader. Integrate it into your form and handle the form state accordingly.

2. Conditional form sections: add a checkbox and an input field using mui and then make the input field show or hide based on the checkbox value (use formik to control the checkbox value ).

Feel free to choose one or more of these Formik and Yup challenges to enhance your form-building skills. Please reach out if you have any questions or need further assistance.