Creating and Validating Forms in React with Formik

Hey there! If you’re dipping your toes into building React apps, you’re likely to encounter a familiar need: forms. Whether it’s a sign-up form, contact form, or feedback form, mastering forms in React can greatly enhance your web development skills. Today, I’ll guide you through creating and validating forms using a nifty library called Formik. It’s a game-changer for handling forms in React, and by the end of this post, you’ll be set to create user-friendly forms like a pro. Let’s dive right in!

Why Use Formik?

Before jumping into code, you might wonder why we should use Formik when React already supports forms. While you certainly can manage forms with just React, handling validations, error messages, and form state can get unwieldy in more complex scenarios. Formik simplifies these aspects and integrates seamlessly with React, making form management both robust and elegant.

Getting Started with Formik

First, you’ll need to set up a React project if you don’t have one already. If you’re new to this, I recommend using Create React App as it provides a hassle-free setup.

npx create-react-app my-formik-app
cd my-formik-app
npm start

With your React app up and running, let’s install Formik:

npm install formik

Creating Your First Form with Formik

Let’s create a simple registration form using Formik. We’ll cover these essential steps:

1. Setting up Formik in your component.

2. Building form fields.

3. Adding basic validation.

Create a new component named RegistrationForm.js:

// src/RegistrationForm.js
import React from 'react';
import { useFormik } from 'formik';
function RegistrationForm() {
const formik = useFormik({
initialValues: {
username: '',
email: '',
password: '',
},
onSubmit: values => {
alert(Welcome, ${values.username}!);
console.log('Form data:', values);
}
});
return (
<form onSubmit={formik.handleSubmit}>
<div>
<label htmlFor="username">Username</label>
<input
id="username"
name="username"
type="text"
onChange={formik.handleChange}
value={formik.values.username}
/>
</div>
<div>
<label htmlFor="email">Email</label>
<input
id="email"
name="email"
type="email"
onChange={formik.handleChange}
value={formik.values.email}
/>
</div>
<div>
<label htmlFor="password">Password</label>
<input
id="password"
name="password"
type="password"
onChange={formik.handleChange}
value={formik.values.password}
/>
</div>
<button type="submit">Register</button>
</form>
);
}
export default RegistrationForm;

Explaining the Code

1. useFormik Hook: We’re using the useFormik hook to manage form state. It requires an initialValues object, which sets initial values for each form field.

2. handleSubmit: This function is called when the form is submitted. Here, we’re just alerting the username and logging the form data.

3. handleChange: This is a built-in function in Formik to update the form’s values as the user types.

Adding Validation

Form validation is crucial for ensuring users provide correct data. Formik makes validation straightforward with its support for Yup schema validation. Let’s add validation to our form:

First, install Yup:

npm install yup

Now, update your RegistrationForm.js:

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
const validationSchema = Yup.object({
username: Yup.string()
.required('Username is required'),
email: Yup.string()
.email('Invalid email address')
.required('Email is required'),
password: Yup.string()
.min(6, 'Password must be at least 6 characters')
.required('Password is required'),
});
function RegistrationForm() {
const formik = useFormik({
initialValues: {
username: '',
email: '',
password: '',
},
validationSchema,
onSubmit: values => {
alert(Welcome, ${values.username}!);
console.log('Form data:', values);
}
});
return (
<form onSubmit={formik.handleSubmit}>
<div>
<label htmlFor="username">Username</label>
<input
id="username"
name="username"
type="text"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.username}
/>
{formik.touched.username && formik.errors.username ? (
<div>{formik.errors.username}</div>
) : null}
</div>
<div>
<label htmlFor="email">Email</label>
<input
id="email"
name="email"
type="email"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.email}
/>
{formik.touched.email && formik.errors.email ? (
<div>{formik.errors.email}</div>
) : null}
</div>
<div>
<label htmlFor="password">Password</label>
<input
id="password"
name="password"
type="password"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.password}
/>
{formik.touched.password && formik.errors.password ? (
<div>{formik.errors.password}</div>
) : null}
</div>
<button type="submit">Register</button>
</form>
);
}
export default RegistrationForm;

Understanding the Validation

• Yup Schema: We’ve defined a validation schema using Yup, specifying that the username, email, and password fields have specific validation rules (e.g., required fields, email format, minimum password length).
• Validation Feedback: Formik provides form errors, which can be displayed using formik.errors and formik.touched to provide real-time feedback as users fill in the form fields.

Finishing Up

Congratulations — you’ve just created a fully functioning, validated form in React using Formik! By managing form state and validation with Formik, you can create complex forms without the usual headaches.

#### Optional Practice Ideas

• Enhance the Form: Add additional fields like a phone number or address and apply suitable validation rules.
• Real-world Scenario: Connect your form to a mock API and submit the data.
• Styling: Use CSS to enhance your form’s appearance and improve user interaction.

I hope this tutorial was helpful in getting you started with forms in React using Formik! Keep experimenting, and soon you’ll be crafting powerful, user-friendly forms with ease. If you have any questions or run into issues, feel free to drop a comment below — I’m here to help. Happy coding!