My Logo
useState Form
001

An alternate login form created w/ useState and basic form validation

This basic login form checks for specific validation. The form also shows error messages next to the inputs every time the form is submitted, if there are any. If the form submission is succesful, you will see an alert for success. This particular version of the form implements the useState hook.

useState Form

About this project

  • Using ternary operators, if there are more than 1 errors, they will display under the email and password inputs.
  • The form requires an email that ends in 'gmail.com'
  • The password is required, has to be at least 10 characters, must include at least 1 lowercase and uppercase letter, and at least 1 number.
  • There is a useState for whether or not the form is after the first submit so that the errors don't show until then.
  • This form implements the useMemo hook to ensure that the errors only render when the inputs change. or the 'isAfterFirstSubmit' state changes.

    • Concepts used

  • useState Hook
  • useMemo Hook
  • Basic Form Validation
  • Multiple useStates
  • Event Listeners