React: Multi Step Validation Form

Design a web application that implements a step-by-step form with validation using the Context API. The form collects personal information: name, email, and password. Implement validation rules for each step. The application has 5 components: NameStep, EmailStep, PasswordStep, MultiStepForm, FinalPage and a file validation.js for managing validation rules.

NameStep

• An input field of type text and with value formData.name.
• Validate the name using validateName function from validation.js.
• Display "Invalid Name!" for invalid names.
• Use FormContext for "formData" and "setFormData".

EmailStep

• An input field of type email and with value formData.email.
• Validate the email using validateEmail from validation.js.
• Display "Invalid Email!" for invalid emails.
• Use FormContext for "formData" and "setFormData".

PasswordStep

• An input field of type password and with value formData.password.
• Validate the password using validatePassword from validation.js.
• Display "Invalid Password!" for invalid passwords.
• Use FormContext for "formData" and "setFormData".

FinalPage

• Display the name and email passed NameStep EmailStep respectively.
• Use FormContext for "formData".

MultiStepForm

• Initialize formData with empty fields for name, email, and password. 
• "Previous" Button:
  • Decreases the step by one when clicked.
  • Disabled on NameStep.
• "Next" Button:
  • Increases the step by one when clicked.
  • Disabled if invalid data is present in any step.

Validation

Valid Field	Validation Rules
Name	A-Z, a-z, no spaces, 6-10 characters
Email	ends with @gmail.com or @hackerrank.com, max 30 characters
Password	At least 1 lowercase, 1 uppercase, 1 digit, 6-10 characters

The following data-testid attributes are required in the component for the tests to pass:

Attribute	Component
multistep-form	MultiStepForm
name-step	NameStep
email-step	EmailStep
password-step	PasswordStep
final-page	FinalPage
progress-indicator	MultiStepForm (Progress Indicator)
previous-button	MultiStepForm (Previous Button)
submit-button	MultiStepForm (Submit Button)
validation-feedback-{field}	NameStep, EmailStep, PasswordStep (Validation Feedback)

Note:

• The application should be designed using Context API and should use only core React functionalities.
• Components have data-testid attributes for test cases and certain classes and ids for rendering purposes. They should not be changed.
• Avoid making changes to other files in the project structure.

Environment

• React Version: 16.13.1
• Node Version: 14(LTS)
• Default Port: 8000

Read Only Files

• src/App.test.js
• src/App.js
• src/App.css
• src/index.js
• src/index.css
• src/registerServiceWorker.js

Commands

• run:

npm start

• install:

npm install

• test:

npm test