Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 10, 2022 08:43 pm GMT

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 .

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 === "") {span      newErrors.email = <span className="text-red-800 text-center">         Email Address Is Required</span>    } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {      newErrors.email = <span className="text-red-800 text-center">        Email address is invalid</span>    } else {      newErrors.email = <h1 className="text-green-800 text-center ">        Email is Valid</h1>    }    if (password === "") {      newErrors.password = <span className="text-red-800 text-center">        Password Is Required</span>    } else if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$/.test(password)) {      newErrors.password = <span className="text-red-800 text-center">        Invalid Password Format</span>    } else {      newErrors.password = <span className="text-green-800 text-center ">        Correct Password</span>    }    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])

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


Original Link: https://dev.to/tefa/simple-validation-form-in-react-using-usehooks-and-localstorage-with-some-tailwind-4d2c

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To