DEV Community

sadiul hakim
sadiul hakim

Posted on

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
Enter fullscreen mode Exit fullscreen mode

and then get into that directory

$ cd formik-login
Enter fullscreen mode Exit fullscreen mode

and create a react project like that

$ npx create-react-app ./ --template redux-typescript
Enter fullscreen mode Exit fullscreen mode

And open the directory in your favourite text editor.In my case it is vs-code.So run the command

$ code .
Enter fullscreen mode Exit fullscreen mode

Make sure you are in the project directory

Now install formik command is

$ yarn add formik
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

Now return formik component from our component

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

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: "",
};

Enter fullscreen mode Exit fullscreen mode

then onSubmit function

const onSubmit = () => {

};

Enter fullscreen mode Exit fullscreen mode

Now for our validationSchema we need another third party library that is Yup .So,let's install Yup

$ yarn add yup
Enter fullscreen mode Exit fullscreen mode

and import at the top

import * as Yup from 'yup'
Enter fullscreen mode Exit fullscreen mode

now create validationSchema

const validationSchema = Yup.object({
});
Enter fullscreen mode Exit fullscreen mode

now pass those three things into Formik component

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

Now we have to use rendering props pattern like this

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

}}
</Formik>;
};
Enter fullscreen mode Exit fullscreen mode

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>;
};
Enter fullscreen mode Exit fullscreen mode

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"),
});
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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) => {

};

Enter fullscreen mode Exit fullscreen mode

Now you console.log our values

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

Enter fullscreen mode Exit fullscreen mode

and reset the form

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

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)