My Logo
useRef Form
001

A simple form using useRef Hook and 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 useRef hook.

useRef Form

About this project

  • The useRef Hook allows me to reference the inputs on these forms to populate the error messages.
  • 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.

    • Concepts used

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