Validating login form with Formik library...
Tags: react, formik, typescript, yup
Published: 2021-11-12 14:52:34

Hey there, today i am gonna validate a login form using formim library.We are going to use react,reduxjs/toolkit and typescript in our project.

At first create a folder on Desktop.Command going to be like that..

```
$ cd Desktop
$ mkdir formik-login
```

and then get into that directory

```
$ cd formik-login
```

and create a react project like that

```
$ npx create-react-app ./ --template redux-typescript
```
And open the directory in your favourite text editor.In my case it is vs-code.So run the command

```
$ code .
``` 
Make sure you are in the project directory

Now install formik command is

```
$ yarn add formik
```
Now we are ready for your client side login form validation project.You can create different component but i am going to use App.tsx only.

Now at the top import 4 components from formik.

```javascript
import {Formik, Form, Field, ErrorMessage} from 'formik';
```

Now return formik component from our component

```javascript
const App: React.FunctionComponent = () => {
  return <Formik></Formik>;
};
```
now we need to give some essential props to Formim component.They are`initialValues,onSubmit,validationSchema`.Here initialValues is our state,onSubmit is a function and validationSchema is some that validate our form.

Now at first create initialValues and its type alias 

```typescript
type State = {
  email: string;
  password: string;
};

const initialValues: State = {
  email: "",
  password: "",
};

```
then onSubmit function

```typescript
const onSubmit = () => {
  
};

```
Now for our validationSchema we need another third party library that is Yup .So,let's install Yup
```
$ yarn add yup
```
and import at the top

```javascript
import * as Yup from 'yup'
```
now create validationSchema

```javascript
const validationSchema = Yup.object({
});
```
now pass those three things into Formik component

```javascript
const App: React.FunctionComponent = () => {
  return <Formik
      initialValues={initialValues}
      onSubmit={onSubmit}
      validationSchema={validationSchema}
></Formik>;
};
```
Now we have to use rendering props pattern like this

```javascript
const App: React.FunctionComponent = () => {
  return <Formik
      initialValues={initialValues}
      onSubmit={onSubmit}
      validationSchema={validationSchema}
>
{(formik)=>{

}}
</Formik>;
};
```
here you can see we are taking a function inside Formim component and this function receives a large object we named it  as formik.You should console.log() that object to see what it contains.Now we need to return our jsx from that function.


```javascript
const App: React.FunctionComponent = () => {
  return <Formik
      initialValues={initialValues}
      onSubmit={onSubmit}
      validationSchema={validationSchema}
>
{(formik)=>{
return (
<Form>
    <div>
       <label htmlFor="email">Email : </label>
       <Field type="email" name="email" />
    </div>
    <div>
       <label htmlFor="password">Password : </label>
       <Field type="password" name="password" />
     </div>
     <button type='submit'>Send</button>
</Form>
)
}}
</Formik>;
};
```
Let me explain what is happening in jsx.We are using Form component instead of regular form element.And using Field Component instead of input element.Make sure your Field components have same name that you have given in initialValues .Otherwise it will not work.

Now our validation part.You see our validationSchema is equal to something like `Yup.Object`.This is a method that takes an object.Let me show you how this object actually look like.

```javascript
const validationSchema = Yup.object({
  email: Yup.string().email("invalid email").required("required"),
  password: Yup.string().required("required"),
});
```
In that object you have to have same properties as initialValues has.

Now how can we show these error messages.If you can recollect we had imported four Components from formik `Formik,Form,Field,ErrorMessage`.We have already used Forim,Form and Field.Now `ErrorMessage` is left.Where do we use it?

We use it like this

```javascript
<div>
   <label htmlFor="email">Email : </label>
   <Field type="email" name="email" />
   <ErrorMessage name="email" component='div' />
</div>

```
Yeah,after the Field component.ErrorMessage takes two props.They are `name,component`.You have to give same name that your above Field component have.And component may be any jsx element or any external component.This component or element will contain your error message.

Now let's talk about out `onSubmit` function.This function takes two parameter one is our state that is initialValues and anther is  an object.

```javascript
const onSubmit = (values,submittingObject) => {
  
};

```
Now you console.log our values

```javascript
const onSubmit = (values,submittingObject) => {
  console.log(values);
};

```
and reset the form

```javascript
const onSubmit = (values:State,submittingObject:any) => {
  console.log(values);
  submittingObject.resetForm();
};

```
Now you will be able to see errors message bellow the input field while changing,submitting,blurring.

Let's disable your submit button when your entered data is invalid and when form is being submitted.

Add these code 

```javascript
<button type="submit" disabled={!formik.isValid || formik.isSubmitting}>Send</button>
```
Now where do we get this formik object?You can see above in rendering props pattern.

If this little post is useful you can flow me.And if you have any question tell me in comment.

Thank you all.