much Nowadays forms are crucial in any application. Building forms are pretty simple but adding validation to them may become a bit of a challenge. It gets even trickier when our forms have a complex structure, like binding the form fields to nested object properties and validating them. You’ll see shortly what I meant by that. The official React documentation doesn’t give you that much on how to handle forms. Well, I think this is ok since forms may have so many underlying business logic when it comes to validation. And React is only concerned about the UI not about the heavy business logic.

So, the background of this post is that a few days ago I was trying to validate a form and I struggled with it a bit as it contains nested schema. I used Material-UI for building the form and used Formik and Yup for validating it. Now I’ll discuss the terms I’ve mentioned (Formik, Yup, Material-UI).

Formik is a small library that helps us with managing states, handling validations and error messages, and handling form submission, etc. You can learn more on https://formik.org/.

Yup is a schema builder that helps us to create a clean validation object, which then can be provided to the validationSchema property of Formik. You can learn more on https://github.com/jquense/yup.

Material-UI provides well-designed input fields and form structure. You can learn about all the form elements and much more on https://material-ui.com/.

Install the required packages:

Let’s get started by installing the required packages using the following command:

npm install @material-ui formik yup

Building the form

We’ll build the form based on the following object:

As you can see in this object initialValues there’s a nested object social with two properties, this is the nested object that I’ve mentioned earlier. Now let’s create the form.

We’ll import some Material-UI components which are optional and we’re only using these for a well-designed UI.

import clsx from ‘clsx’;
import PropTypes from ‘prop-types’;
import { makeStyles } from ‘@material-ui/styles’;
import { Card, CardHeader, CardContent, CardActions, Divider, Grid, TextField, Button } from ‘@material-ui/core’;

Here’s the full code of the form:

The form looks like the following:

Adding validations to the form

Our goal is to prevent users from submitting an invalid form. We’ll use different validation criteria as you’ll see shortly in the Yup validation schema. We’ll make the button disabled and enable it once all the validation criteria are met.

Let’s import the libraries required for the validation.

import * as Yup from ‘yup’;
import { Formik, getIn } from ‘formik’;

Let’s have a look at the yup validation schema object:

You’ll notice that the nested object social holds another Yup schema.

Now, let’s bring everything together, then we’ll discuss it.

We’ve added noValidated to the form to prevent HTML5 default form validation. Now let’s discuss the following text field:

Here error and helperText will be set conditionally if there’s an error and the input field is touched. Now let’s discuss the following text field with a slightly different syntax:

Here, because of the nested object, we’re setting error and helperText values differently. We’re using a helper function getIn() provided by Formik. Also, notice the value and name prop and how we set the value by accessing values.social.facebook, etc.

You’ll also notice we’ve conditionally made the button disabled for invalid form:

After running the final code snippet if we try to submit the invalid form the output looks like this:

If you submit a valid form after filling out all the required fields, you’ll get the values automatically passed to the onSubmit() function by Formik. Then you can write the necessary code to send those data to the backend if you want.

Summary

Here, we described how can we validate forms and show error messages with Formik, Yup, and Material-UI. Most importantly we’ve worked with the nested object and discussed how to validate the nested object properties. We also discussed how to access the submitted data.

That’s it, I hope you’ve enjoyed this simple tutorial and this is helpful to you. To learn more about Formik, Yup and Material-UI please visit the following links in the Resources section.

Thanks!

Resources

1. Formik: https://jaredpalmer.com/formik/docs/overview
2. Material-UI: https://material-ui.com/
3. Yup: https://github.com/jquense/yup