neetibut / react-form-validation-example

Exercise

Project Overview:

We require a simple web page that demonstrates real-time form input validation using React. The form should include fields for email and password, providing immediate feedback on the validity of the inputs.

Objectives:

• Create an intuitive and user-friendly form for email and password input. • Implement real-time validation to improve user experience. • Ensure the form can be easily integrated into a larger web application.

Target Audience:

• The primary users are developers looking to understand and implement basic form validation in React. • The form should be simple enough for beginners to grasp but demonstrate best practices that more experienced developers can appreciate.

Requirements:

1. Form Fields:

• Email: An input field for the user to enter their email address. • Password: An input field for the user to enter their password.

2. Validation Criteria:

• Email: Must follow standard email format (e.g., [email protected]). • Password: Must be at least 6 characters long.

3. Real-Time Feedback:

• Display error messages below each input field if the input does not meet the validation criteria. • Error messages should be clear and concise, displayed in red text.

4. Submission Handling:

• Prevent form submission if there are any validation errors. • Display a success message if the form is submitted without errors.

5. Technology Stack:

• Use React with Vite for a fast and modern development experience. • Utilize React hooks (useState, useEffect) for state management and side effects.

6. Design:

• Keep the design minimalistic and clean, focusing on functionality and user experience. • Use basic styling to ensure the form is visually appealing and easy to use.

Deliverables:

• A single-page React application demonstrating the form input validation. • Clear and commented code to explain the functionality.

Timeline:

• The project should be completed within one week from the start date.

Success Criteria:

• The form correctly validates inputs in real-time. • Error messages are displayed appropriately and clear. • The form is functional, easy to use, and integrates seamlessly into a larger React application.