Validate sign-up form

Medium
237
3
42.1% Acceptance

In this coding challenge we have provided you with a very basic sign-up form that collects some information form the users. Your task is to add validation to the form to improve the user experience.

You need to make sure that:

  • The first name is not empty.
  • The last name is not empty.
  • Email is a valid email address.
  • Password is at least 8 characters long.
  • Confirm password field has the same value as the password.

Match the above conditions to relevant error messages in Example section and display them below the relevant input fields. You should update the handleSubmit method to show the alert only if all of the input values are accepted, alternatively display only the relevant error messages.

Errors should be displayed only after the user has pressed the Sign Up button, if there are no errors call console.log(’Form submitted successfully’).

We have already written some starting code for you.

image

Instructions

  • You don’t need to worry about styling your application as we have already done it for you. But if you wish to update the styles, you can use styled-components, inline style or tailwindcss.
  • Check out the demo gif to make sure that you understand what you’re meant to build.
  • You can use this regex /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/ for email validation.
  • Do not edit the data-testid attributes.

Examples (error messages)

"First name cannot be empty"
"Last name cannot be empty"
"Invalid email address"
"Password must be greater than 7 characters"
"Passwords do not match"

Hints

  • You will need to keep track of two pieces of state. The first one is the current input values and the second one is the corresponding errors.
  • You will need to update the handleSubmit to also call a custom validation function. The validation function has to process the input values and determine if they pass the conditions or not.