Skip to content

Latest commit

 

History

History
93 lines (75 loc) · 3.8 KB

README.md

File metadata and controls

93 lines (75 loc) · 3.8 KB
Raw

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