React Hook Form Validation with Yup.

React is a Javascript framework which throughout the years has gotten some buzz. And today we would looking at validating react-hook-forms with yup.

First off, you have to open your terminal and create your react app.

npx-create-react-app .

This is to create a react app in the directory you are.

After creating your react app, you can start installing the dependencies we would be using for this tutorial.

Still in your terminal run

npm install react-hook-form yup

When you do this the dependencies would start installing. After being installed, you can run your react app by simply writing npm start.

On your localhost 3000, your react app should get started.
Now you delete some files and clear it all up to start afresh.

Create a form.js file in your file use rfce(react functional export component)and it will automatically create a React component for you.
In your app.js import the form component and start coding!

Now let's create our form.

return (
<form>
     <input type="text" placeholder="Enter your full name...." />
     <input type="email" placeholder="Enter your email...." />
     <input type="password" placeholder="Enter Password...." />
     <input type="password" placeholder="Confirm password...." />
<input type="submit"/>

Style the form to your taste and then we can start the validation.
Now we import useForm from 'react-hook-form.

useForm is a hook we can use to generate a lot of different functionality related to the form.

After importing the hook we use it like this👇

const {register, handleSubmit } = useForm();

HandleSubmit is a function we would call whenever the form is submitted so let's create the function but in order for it to work we would have to create another function which will be the one we would write the code to handle submission.

const onSubmit = (data) => {
console.log("data")

Now we would pass it to our form. The register function as seen below is used to tell react-hook-form which input you want to be part of the validation.

<form onSubmit={handleSubmit(onSubmit)}>
     <input type="text" placeholder="Enter your full name...." {...register("name")} />
     <input type="email" placeholder="Enter your email...."   {...register("email")}/>
     <input type="password" placeholder="Enter Password...."  {...register("password")}/>
     <input type="password" placeholder="Confirm password...."   {...register("confirmPassword")} />
<input type="submit"/>

Now we start the validation using yup. First off, we import yup.

import * as yup from 'yup'

After importing yup we create a schema

const schema = yup.object().shape({
name: yup.string().required(),
email: yup.string().email().required(),
password: yup.string().min(4).max(20).required,
confirmPassword: yup.string(). oneOf([yup.ref("password"), null]).required(),
});

With this we've specified how we want our input to be and if any of the requirements is left missing the form won't submit. There are other things you can do with yup you can read its documentation here.

And with this, we've come to the end of the tutorial.
Thank you and Happy Coding!

Full code👇

import { useForm } from "react-hook-form";
import * as yup from "yup"
function App() {
const {register, handleSubmit } = useForm();

const schema = yup.object().shape({
name: yup.string().required(),
email: yup.string().email().required(),
password: yup.string().min(4).max(20).required,
confirmPassword: yup.string(). oneOf([yup.ref("password"), null]).required(),
});


const onSubmit = (data) => {
console.log("data")

return (
<form onSubmit={handleSubmit(onSubmit)}>
     <input type="text" placeholder="Enter your full name...." {...register("name")} />
     <input type="email" placeholder="Enter your email...."   {...register("email")}/>
     <input type="password" placeholder="Enter Password...."  {...register("password")}/>
     <input type="password" placeholder="Confirm password...."   {...register("confirmPassword")} />
<input type="submit"/>
);
}

export default App;