A modern and customizable multi-step form with validation using React. This form guides users through multiple steps, each with its own set of form fields and validation logic.
- Number of Steps: The form has three steps, each with relevant form fields.
- Form Fields: Fields include personal information, address information, and account setup details.
- Validation Logic: Client-side validation for required fields, email formats, date formats, and more.
- Navigation: Users can navigate between steps, go back to the previous step, and submit the form.
- Full Name (text input)
- Email Address (email input)
- Date of Birth (date input)
- Street Address (text input)
- City (text input)
- State (dropdown/select input)
- Zip Code (numeric input)
- Username (text input)
- Password (password input)
- Confirm Password (password input)
- Full Name: Required, minimum length 3 characters.
- Email Address: Required, must be a valid email format.
- Date of Birth: Required, must be a valid date.
- Street Address: Required, minimum length 5 characters.
- City: Required, minimum length 3 characters.
- State: Required (selected from the dropdown).
- Zip Code: Required, must be a valid numeric format.
- Username: Required, minimum length 3 characters.
- Password: Required, minimum length 6 characters.
- Confirm Password: Required, must match the password field.
- Clone this repository:
git clone <repository-url> - Install dependencies:
npm install - Start the development server:
npm start
- Add your own form validation logic or modify existing rules.
- Style the form components and pages according to your design preferences.
- Extend the form with additional steps or fields as needed.
- React
- React Router (for navigation)
Feel free to contribute to this project by opening issues or submitting pull requests. All contributions are welcome!
Kaushik Moralwar