Fifth step in specs. I added red border to not validated fields in second form with text errors like in first form. In Field "WHERE DID YOU HEAR ABOUT US" I removed arrow, because it text field, not select field. When click on button "Back" in second form, the data from first form stays.
Specs
- You are expected to use React + Redux to build the forms.
- User should be allowed to go to next step only if all fields on current step are valid.
- There is a blue progress meter on top that shows current progress of steps.
- When moving from step to step, the page should not reload. This is a Single Page Application.
- Style the app exactly as given in the screens above. Though, you are encouraged to suggest improvements to the form in a note along with your test.
- You are free to use bleeding edge CSS features like Flexbox to make your work easy.
- You need to implement following validations: 7.1. Email should be required. 7.2. Email should be a valid email address. Use regex validation. 7.3. Password is required. 7.4. Password should be minimum 6 characters long. 7.5. Password confirmation should match the password. 7.6. All fields in “Date of birth” are required. 7.7. All fields in “Date of birth” should be valid respectively. 7.7.1. DD should be a number and 31 ≥ DD ≥ 1. 7.7.2. MM should be a number and 12 ≥ MM ≥ 1. 7.7.3. YYYY should be a number. 7.7.4. Dates like 30/2/1991 are invalid. 7.8. The user must be 18 year old or more. 7.9. One gender option must be selected from the 3 given. 7.10. “Where did you hear about us?” is optional.
- When a field is invalid, it should show a useful message in the label itself, red in colour.
- The “Go to Dashboard” button at the last step should print all the details entered as a JSON in the Browser console, something like: 9.1. { “user_data”: { “email”: …, “password”: …, “date_of_birth”: 1485761262, “gender”: “female”, “how_hear_about_us”: null } }
Extras • Write unit tests for React components and reducers.
• Add animations between step transitions and to the progress bar.
• Implement Server side rendering of the form.
• Use redux-form to implement the forms and validation.