Simple Validation Form In React Using UseHooks And LocalStorage With Some Tailwind🥳🎉

Hello Everyone Who Came to My Blog, I Really Appreciate that and hope i could to help you to create simple Validation Register Form.

I Don't Want To Write Long Blog , So Let's Dive into the code .

Content:

First Let's Write Simple jsx code:

    <div
      className="login grid place-content-center  
    bg-gradient-to-r from-purple-900 via-purple-1000 to-blue-800 "
    >
      <form
        className="card grid place-content-center  h-96 w-96  
       "
        onSubmit={handleSubmit}
      >
        <label htmlFor="">name:</label>
        <input
          type="text"
          value={name}
          placeholder="Enter Your Name"
          onChange={(e) => setName(e.target.value)}
        />
        {errors.name}

        <label htmlFor="email">Email:</label>
        <input
          type="email"
          placeholder="email address"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {errors.email}

        <label htmlFor="password">Password:</label>
        <input
          type="text"
          placeholder="password"
          value={password}
          id="password"
          onChange={(e) => setPassword(e.target.value)}
        />
        {errors.password}

        <label htmlFor="phoneNumber">phone Number:</label>
        <input
          type="text"
          value={phoneNumber}
          placeholder="phone Number"
          id="phoneNumber"
          onChange={(e) => setPhoneNumber(e.target.value)}
        />

        <div className="buttons flex gap-3 justify-center mt-5">
          <button type="submit" className="btn-1">
            Sign Up
          </button>
          <button>
            <Link
              className="
        "
              to="/login"
            >
             Login{" "}
            </Link>
          </button>
        </div>
      </form>
    </div>

2- Second It's Time to Make this form Dynamic :

We Need First To Initiate the UseState Hooks that we use

          ```
         const [email, setEmail] = useState("")
         const [password, setPassword] = useState("")
         const [name, setName] = useState("")
         const [phoneNumber, setPhoneNumber] = useState("")
         const [errors, setErrors] = useState({})

           ``` 

Prepare the Submit Button As Like that

  const handleSubmit = (e) => {
    e.preventDefault()
    formValidation()
    setUsers([...users, { email: email, password: password }])
  }

And Now It's Time To Hit Some Conditions for the Right Register

  const formValidation = () => {
    let newErrors = {}

    if (name === "") {
      newErrors.name = <h1 className="text-red-800 text-center">Name Can't Be Blanck</h1>
    }

    if (email === "") {
      newErrors.email = <h1 className="text-red-800 text-center"> Email Address Is Required</h1>
    } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
      newErrors.email = <h1 className="text-red-800 text-center">Email address is invalid</h1>
    } else {
      newErrors.email = <h1 className="text-green-800 text-center ">Email is Valid</h1>
    }

    if (password === "") {
      newErrors.password = <h1 className="text-red-800 text-center">Password Is Required</h1>
    } else if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/.test(password)) {
      newErrors.password = <h1 className="text-red-800 text-center">Invalid Password Format</h1>
    } else {
      newErrors.password = <h1 className="text-green-800 text-center ">Correct Password</h1>
    }

    setErrors(newErrors)
  }

And The Final Step is Saving the user's data in localstorage in this way:

We can initiate the localstorage

  const [users, setUsers] = useState(() => {
    const data = localStorage.getItem("data")
    return data ? JSON.parse(data) : []
  })

And Using UseHooks to Watch if there is not a user in localstorage before to set a new one

  useEffect(() => {
    localStorage.setItem("data", JSON.stringify(users))
  }, [users])

Final Code:

const SignUp = () => {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [name, setName] = useState("")
  const [phoneNumber, setPhoneNumber] = useState("")
  const [errors, setErrors] = useState({})

  const [users, setUsers] = useState(() => {
    const data = localStorage.getItem("data")
    return data ? JSON.parse(data) : []
  })

  const handleSubmit = (e) => {
    e.preventDefault()
    formValidation()
    setUsers([...users, { email: email, password: password }])
  }

  const formValidation = () => {
    let newErrors = {}

    if (name === "") {
      newErrors.name = <h1 className="text-red-800 text-center">Name Can't Be Blanck</h1>
    }

    if (email === "") {
      newErrors.email = <h1 className="text-red-800 text-center"> Email Address Is Required</h1>
    } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
      newErrors.email = <h1 className="text-red-800 text-center">Email address is invalid</h1>
    } else {
      newErrors.email = <h1 className="text-green-800 text-center ">Email is Valid</h1>
    }

    if (password === "") {
      newErrors.password = <h1 className="text-red-800 text-center">Password Is Required</h1>
    } else if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/.test(password)) {
      newErrors.password = <h1 className="text-red-800 text-center">Invalid Password Format</h1>
    } else {
      newErrors.password = <h1 className="text-green-800 text-center ">Correct Password</h1>
    }

    setErrors(newErrors)
  }

  useEffect(() => {
    localStorage.setItem("data", JSON.stringify(users))
  }, [users])

  return (
    <div
      className="login grid place-content-center  
    bg-gradient-to-r from-purple-900 via-purple-1000 to-blue-800 "
    >
      <form
        className="card grid place-content-center  h-96 w-96  
       "
        onSubmit={handleSubmit}
      >
        <label htmlFor="">name:</label>
        <input
          type="text"
          value={name}
          placeholder="Enter Your Name"
          onChange={(e) => setName(e.target.value)}
        />
        {errors.name}

        <label htmlFor="email">Email:</label>
        <input
          type="email"
          placeholder="email address"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        {errors.email}

        <label htmlFor="password">Password:</label>
        <input
          type="text"
          placeholder="password"
          value={password}
          id="password"
          onChange={(e) => setPassword(e.target.value)}
        />
        {errors.password}

        <label htmlFor="phoneNumber">phone Number:</label>
        <input
          type="text"
          value={phoneNumber}
          placeholder="phone Number"
          id="phoneNumber"
          onChange={(e) => setPhoneNumber(e.target.value)}
        />

        <div className="buttons flex gap-3 justify-center mt-5">
          <button>
            <Link
             type="submit"
              to="/sign-up"
            >
              Sign Up{" "}
            </Link>
          </button>
        </div>
      </form>
    </div>
  )
}

export default SignUp

👉 Visit my github account

Conclusion:

In the end, I tried to write a simple validation form to learn how to use usehooks and also save it in localstorage. I hope that I was able to help you, and good luck always