In order to ensure that a form element of your web application is returning valid data, it is helpful to build automated validation into your code. This is true in React as well, as creating form validation early on can often save you from encountering errors down the road.
In React, working with and validating forms can be a bit verbose. To make your code more manageable, you can use a package like Formik to build your forms.
In this tutorial, you will create a React project, add the Formik package, customize the Formik component with an onSubmit
callback and a validate
function for error messages, and then display those error messages to the user.
By the end of this tutorial, you will have a project like this live example on CodeSandbox.
Use Create React App to create a project. For the purposes of the tutorial, you can name your project validate-react-login-form.
You can now change into the project directory, start the node server, and view it in a web browser.
If you have yarn
installed, your message may instruct you to use yarn start
instead of npm start
. If you prefer to have npm
instructions, it is possible to use --use-npm
flag when creating your project. You can use either yarn
or npm
for this tutorial.
You can also open this project directory in your favorite editor to create and modify files.
Create React App will include several files, but for the purposes of this tutorial you will only be directly creating or modifying three files: index.js
, index.css
, and ValidatedLoginForm.js
.
Now that we have our initial project created, we will install three packages: Formik, email-validator, and Yup.
Formik makes handling validation, error messages, and form submission more manageable.
In your terminal, install Formik:
email-validator is a tiny package used to validate emails.
If your terminal, install email-validator
:
Yup is a schema validator that is commonly used in conjunction with Formik.
In your terminal, install Yup:
Now that you’ve installed the necessary packages, you are ready to create the validated form component.
Now that you have installed the dependencies, you can start to write your ValidatedFormComponent
. For now, you will create the basics and import it into the root file in the app to display it.
To do this, you will do the following:
index.js
Create a new file in your src
directory called ValidatedLoginForm.js
. Inside of that file, add the basic code for a functional component:
Then, include it in your index.js
file:
Next, reference the component:
When you put all those pieces together, index.js
will look like this:
You will see the form component displayed:
Now, let’s revisit ValidatedLoginForm.js
to implement Formik.
First, import Formik, email-validator, and Yup in your new component:
Now, let’s write the Formik tag with initial values. Think of initial values as setting your state initially.
You’ll also need an onSubmit
callback. This callback will take two parameters, values and an object, that you can destructure. The values represent the input values from your form. You will add some dummy code here to simulate an async login call, then log out what the values are.
In the callback, call the setSubmitting
function that was destructured from the second parameters. This will allow you to enable or disable the Submit button while the asynchronous login call is happening:
The Formik component uses render props to supply certain variables and functions to the form that we create.
In short, render props are used to pass properties to children elements of a component. In this case, Formik will pass properties to your form code, which is the child. Notice that you’re using destructuring to get a reference to several specific variables and functions.
At this point, ValidatedLoginForm.js
should resemble:
You can now start to write the code to display the form. The form will have two inputs (email and password), labels for each, and a submit button.
Notice that the onSubmit
is calling the handleSubmit
from the props.
Earlier, it was mentioned that you could disable your submit button while the user is already attempting to log in. You can add that change now by using the isSubmitting
property that you destructured from the previous props:
You can use the following CSS for your styles.css
file:
Also, import styles.css
in index.js
.
Now let’s validate our inputs. The first step is to determine what constraints we want to have on our input. Let’s start with email. Email input should:
Password input should:
We’ll cover two ways to create these messages, one manually and one using Yup.
The first option is to create our validate function ourselves. The purpose of the function is to iterate through the values of our form, validate these values in whatever way we see fit, and return an errors
object that has key value pairs of value
and message
.
Inside of the Formik tag, start with adding the following code. This will always add an Invalid email
error for email.
Now, you can ensure that the user has input something for the email:
Then, you can check that the email is a valid-looking email by using the email-validator package. This will look almost the same as the equivalent check for email:
That takes care of email, so you will work on the password form. You will first check that the user input something:
Now you need to ensure that the length is at least eight characters:
Lastly, check that the password contains at least one number. For this, you can use regex:
The completed file will look like this:
You might have noticed that handling the validate logic on our own gets a bit verbose. You have to manually do all of the checks. Yup can save you some of this work. When using Yup, you will no longer see the Validate
property, but instead use validationSchema
.
Let’s start with email. Here is the equivalent validation using Yup:
Now, for password:
You’ve now explored two different methods for validating forms. Next you will update the code to display error messages.
Now that we have the logic for creating error messages, we need to display them. You will need to update the inputs in your form to do this.
We need to update several properties for both email and password inputs:
value
onChange
onBlur
className
Let’s start by updating value
, onChange
, and onBlur
. Each of these will use properties from the render props:
Then you can add a conditional “error” class in case there are any errors. You can check for errors by looking at the errors
object.
You can also check the touched property to see whether or not the user has interacted with the email input before showing an error message.
Lastly, if there are errors, you will display them to the user.
The final result for the email field will look like this:
Now you need to do the same with the password. These steps are similar to the email.
The final result for the password field will look like this:
Now that your form is complete, you are ready to test it out. You can start by clicking the button without entering anything. You will see validation messages:
Now, we can get more specific for testing messages. Refresh your page to do this. Click inside of the email input, but don’t type anything:
Then, click away from the input. You should see the Required
message pop up. Notice that this message doesn’t pop up automatically when the page loads. You only want to display error messages after the user has interacted with the input.
Now, start to type. You will get a message about the email not being valid.
Type in a valid email, and watch your error message go away.
Now, do the same for password. Click on the input, then away, and you’ll get the required message.
Then, start typing and you’ll see the length validation.
Then, type eight or more characters that do not include a number, and you’ll see the must contain a number
message.
Finally, add a number, and the error messages go away.
You’ve now created a form with automatic validation in React, using Formik and Yum.
For more tutorials on React, check out our React Topic page.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!