Build a form validation component that ensures the accuracy and integrity of user-submitted data in the form of a registration form. The component should demonstrate your problem-solving skills, ability to write clean and maintainable code, and showcase your technical proficiency in frontend development.
-
Implement a form validation component using technologies such as React, Typescript (S)CSS.
-
The component should validate form fields according to the specified requirements:
- Implement validation rules for required fields, data formats (e.g., email, phone number), and any custom validation criteria.
- Display clear and user-friendly error messages when validation errors occur, indicating the specific field(s) that require attention.
- Ensure a seamless and visually appealing user experience by:
- Highlighting fields with validation errors using appropriate UI indicators or styling.
- Providing real-time feedback and validation as users interact with the form, guiding them to correct any mistakes.
- Design the form validation component to be modular, reusable, and easily integrated into different forms across an application.
Integrate the Zod library (https://github.com/colinhacks/zod) for data validation in your form validation component. Zod is a TypeScript-first runtime validation library that provides a concise and expressive API for defining and validating data schemas. If you choose to use Zod, demonstrate how it enhances your form validation logic, error handling, and validation message generation.
-
As a user, I want to receive clear and helpful error messages when I try to submit the registration form with missing or invalid data, so that I can quickly identify and fix the issues.
-
As a user, I want to see real-time validation feedback as I enter my information into the registration form, so that I can proactively correct any mistakes before submitting the form.
-
As a user, I want the registration form to enforce specific validation rules for fields such as email, password, and phone number, so that I can be confident that the data I provide is in the expected format.
-
As a user, I want the registration form to indicate visually which fields have validation errors, so that I can easily identify the problematic fields and make the necessary corrections.
-
As a user, I want the registration form to display a success message or redirect me to a confirmation page after successfully submitting the form, so that I know my registration was successful.
-
As a developer, I want the form validation component to be easily reusable, allowing me to integrate it into other forms across the application without duplicating code.
-
As a developer, I want the form validation component to provide flexible configuration options, such as enabling or disabling specific validation rules, so that it can be customised to fit different registration forms requirements.
-
As a developer, I want the form validation component to be modular and maintainable, with clear separation of concerns and easy-to-understand code structure.
-
As a developer, I want to ensure that the form validation component performs efficiently, with minimal impact on the registration form's loading speed and responsiveness.
Your submission will be evaluated based on the following criteria:
- Your ability to develop a functioning form component using HTML/(S)CSS, React, Node.js and any other related technologies.
- Your understanding of web semantics and best practices for writing clean, maintainable, and efficient code.
- Clarity and effectiveness of error messaging and feedback to users.
- Code organisation, structure, and cleanliness.
- Your understanding of building with accessibility in mind.
- Your ability to demonstrate a flair for the finer details such as micro-interactions.
- Reusability, modularity, and integration capabilities of the form validation component.
- Optional: Effective integration and usage of Zod library (if chosen).
If you could present your work in a Git version control repository hosting service such as Github, Bitbucket, GitLab, Codepen, Codesandbox etc and provide some form of a demo of your submission working.
In order to ensure that your time is respected, we recommend that you dedicate as much time as you deem necessary to complete the task assessment. However, please keep in mind that we anticipate it should take no less than 4 hours. In the event that you are unable to complete the assessment within this timeframe, kindly provide documentation in a README outlining your proposed approach to finish the assessment.
Best of luck!