Validating login form with Formik library...

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.

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

Now return formik component from our component

const App: React.FunctionComponent = () => {
  return <Formik></Formik>;
};

now we need to give some essential props to Formim component.They areinitialValues,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

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

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

then onSubmit function

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

import * as Yup from 'yup'

now create validationSchema

const validationSchema = Yup.object({
});

now pass those three things into Formik component

const App: React.FunctionComponent = () => {
  return <Formik
      initialValues={initialValues}
      onSubmit={onSubmit}
      validationSchema={validationSchema}
></Formik>;
};

Now we have to use rendering props pattern like this

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.

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.

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

<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.

const onSubmit = (values,submittingObject) => {

};

Now you console.log our values

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

and reset the form

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

<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.