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.
• 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.
• 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.
- 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.
- Validation Criteria:
• Email: Must follow standard email format (e.g., example@domain.com). • Password: Must be at least 6 characters long.
- 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.
- Submission Handling:
• Prevent form submission if there are any validation errors. • Display a success message if the form is submitted without errors.
- Technology Stack:
• Use React with Vite for a fast and modern development experience. • Utilize React hooks (useState, useEffect) for state management and side effects.
- 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.
• A single-page React application demonstrating the form input validation. • Clear and commented code to explain the functionality.
• The project should be completed within one week from the start date.
• 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.