Creation of React Forms with Formik & Yup together…
Hi Guys!!! Hope you are doing well. Let’s start our discussion on Formik and Yup with the tagline mentioned below,
“Build forms in React,without the tears”- Jared Palmer, Creator of Formik.
So, let’s see what are the reasons of tears behind creating a React form. From my personal experience, when I started working with React, creating, validating react forms, sending data, handling the onSubmit( ) function and onChange( ) function didn’t create much problem for me. But when the form size became larger, creating the states and the input fields with proper onChange( ) and onSubmit( ) functions, adding validation for each input fields in the form, creating a boolean state by making it true or false according to the validation status, all these activities really made the things complicated. In this situation, Formik is proved to be the best solution for all such problems in creating a form. Formik contains a higher order component that helps in managing react states, validation of input fields, error management, form submission etc. with several techniques which actually makes the management of React forms much much easier.
So, let’s explore the concept in a more detailed manner,
Before starting our discussion, i would like to show you the code first,
Now, let’s begin the discussion by referring the above code. Here, we have imported Field, Form and ErrorMessage from Formik and the form validation is done with the Yup object schema validator which hooks into Formik via the handy
In Signup form, the most common part is confirm Password and A common situation when implementing a Sign Up form is asking the user to input their password twice and then the app can make sure they match. To do this, we need the validation of our ConfirmPassword value to reach outside of itself to make a comparison with the Password value. This can be done with Yup’s ref function. This is done by :
.oneof([Yup.ref(‘password’),null],’Password does not match’) method means we can able to reference the value of password with ref. We use the oneOf function to ensure that ConfirmPassword either matches password or if it is left blank and matches null then it passes the validation for the time being. The second argument to oneOf is a custom validation message when this validation fails.
The most interesting thing about formik is that the error message of each input fields will automatically shown in the <ErrorMessage/> tag provided the name of the <Field/> tag and name of the <ErrorMessage/> tag is same.
So, That is all about a little implementation of Formik.
You can find whole code on my GitHub repo
It's a implementation of designing Form with validation using Formik and Yup GitHub is home to over 50 million…
I would highly recommend you people to go through the documentation of Formik and Yup. There are more ways to use formik for creating react forms according to the development requirements.
Hope, this article is gonna be really helpful to you to kick off your web development skill to one more step ahead using formik for creating React Forms.