Ready to level up your React forms? Let’s dive into the world of Formik and Yup – the dynamic duo that’ll make your form validation a breeze.
First things first, why bother with form validation? Well, it’s simple. We want to make sure our users input the right data and catch any errors before they hit that submit button. It’s like having a friendly assistant double-checking everything for you.
Now, enter Formik. This nifty library takes the headache out of handling forms in React. It manages all the nitty-gritty details like form state, submission handling, and error messages. But Formik’s real superpower? It plays nice with Yup, our validation sidekick.
Yup is all about schema validation. Think of it as a rule book for your forms. You define what’s allowed and what’s not, and Yup makes sure everything follows those rules. It’s like having a strict but fair referee for your data.
Let’s get our hands dirty and see how this works in practice. First, we need to install our tools:
npm install formik yup
Got that done? Great! Now let’s create a simple form with email and password fields:
import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
const LoginForm = () => {
return (
<Formik
initialValues={{ email: '', password: '' }}
onSubmit={(values, { setSubmitting }) => {
// Handle form submission
console.log(values);
setSubmitting(false);
}}
>
<Form>
<Field type="email" name="email" />
<Field type="password" name="password" />
<button type="submit">Submit</button>
</Form>
</Formik>
);
};
export default LoginForm;
This sets up a basic form using Formik. But where’s the validation? That’s where Yup comes in. Let’s add some rules:
const validationSchema = Yup.object().shape({
email: Yup.string().email('Invalid email').required('Email is required'),
password: Yup.string().min(8, 'Password must be at least 8 characters').required('Password is required'),
});
Now we’ve got some rules. The email needs to be a valid email address, and the password needs to be at least 8 characters long. Both fields are required. Let’s add this to our form:
const LoginForm = () => {
return (
<Formik
initialValues={{ email: '', password: '' }}
validationSchema={validationSchema}
onSubmit={(values, { setSubmitting }) => {
// Handle form submission
console.log(values);
setSubmitting(false);
}}
>
{({ errors, touched }) => (
<Form>
<Field type="email" name="email" />
{errors.email && touched.email ? <div>{errors.email}</div> : null}
<Field type="password" name="password" />
{errors.password && touched.password ? <div>{errors.password}</div> : null}
<button type="submit">Submit</button>
</Form>
)}
</Formik>
);
};
See what we did there? We added the validationSchema to Formik, and we’re now displaying error messages when a field is touched and doesn’t meet our criteria.
But wait, there’s more! Yup is incredibly flexible. Want to add a custom validation rule? No problem. Let’s say we want to make sure the password contains at least one uppercase letter:
const validationSchema = Yup.object().shape({
email: Yup.string().email('Invalid email').required('Email is required'),
password: Yup.string()
.min(8, 'Password must be at least 8 characters')
.matches(/[A-Z]/, 'Password must contain at least one uppercase letter')
.required('Password is required'),
});
Now our password field is even more secure. But what if we want to get really fancy? Yup lets us create custom validation methods too. Let’s add a rule that the password can’t contain the user’s email address:
const validationSchema = Yup.object().shape({
email: Yup.string().email('Invalid email').required('Email is required'),
password: Yup.string()
.min(8, 'Password must be at least 8 characters')
.matches(/[A-Z]/, 'Password must contain at least one uppercase letter')
.test('no-email', 'Password cannot contain your email', function(value) {
return !value || !value.includes(this.parent.email);
})
.required('Password is required'),
});
Cool, right? We’re using Yup’s test method to create a custom validation rule. The password field now has access to the email field through this.parent, allowing us to compare them.
Now, let’s talk about error messages. They’re important, but nobody likes a form that screams at them. We can make our error messages a bit friendlier:
const LoginForm = () => {
return (
<Formik
initialValues={{ email: '', password: '' }}
validationSchema={validationSchema}
onSubmit={(values, { setSubmitting }) => {
// Handle form submission
console.log(values);
setSubmitting(false);
}}
>
{({ errors, touched }) => (
<Form>
<Field type="email" name="email" />
{errors.email && touched.email ? <div className="error-message">{errors.email}</div> : null}
<Field type="password" name="password" />
{errors.password && touched.password ? <div className="error-message">{errors.password}</div> : null}
<button type="submit">Submit</button>
</Form>
)}
</Formik>
);
};
We’ve added a CSS class to our error messages. Now we can style them to be less aggressive. Maybe a soft red color and a smaller font?
.error-message {
color: #ff6b6b;
font-size: 0.8em;
margin-top: 5px;
}
Much better! Our form is now user-friendly and informative without being overwhelming.
But what about more complex forms? Maybe we have a registration form with a “confirm password” field. Yup’s got us covered:
const validationSchema = Yup.object().shape({
email: Yup.string().email('Invalid email').required('Email is required'),
password: Yup.string()
.min(8, 'Password must be at least 8 characters')
.matches(/[A-Z]/, 'Password must contain at least one uppercase letter')
.required('Password is required'),
confirmPassword: Yup.string()
.oneOf([Yup.ref('password'), null], 'Passwords must match')
.required('Confirm password is required'),
});
The oneOf method ensures that the confirmPassword field matches the password field. Neat, huh?
Now, let’s talk about conditional validation. What if we have a checkbox for a newsletter signup, and we only want to require a phone number if they check the box? Yup can handle that too:
const validationSchema = Yup.object().shape({
email: Yup.string().email('Invalid email').required('Email is required'),
password: Yup.string()
.min(8, 'Password must be at least 8 characters')
.matches(/[A-Z]/, 'Password must contain at least one uppercase letter')
.required('Password is required'),
newsletter: Yup.boolean(),
phone: Yup.string().when('newsletter', {
is: true,
then: Yup.string().required('Phone number is required for newsletter signup'),
}),
});
Here, the phone field is only required if the newsletter checkbox is checked. Pretty cool, right?
But wait, there’s more! What if we want to validate a field based on multiple other fields? Yup’s got us covered there too. Let’s say we have a “special offer” checkbox that’s only valid if the user is over 18 and has signed up for the newsletter:
const validationSchema = Yup.object().shape({
email: Yup.string().email('Invalid email').required('Email is required'),
age: Yup.number().positive().integer().required('Age is required'),
newsletter: Yup.boolean(),
specialOffer: Yup.boolean().when(['age', 'newsletter'], {
is: (age, newsletter) => age >= 18 && newsletter,
then: Yup.boolean(),
otherwise: Yup.boolean().oneOf([false], 'Special offer is only available for adults subscribed to the newsletter'),
}),
});
This validation ensures that the special offer can only be selected if the user is 18 or older and has signed up for the newsletter. If not, it forces the checkbox to be unchecked and displays an error message.
Now, let’s talk about performance. When you have a large form with complex validation rules, you might notice some lag, especially on slower devices. Here’s where Yup’s lazy validation comes in handy:
const validationSchema = Yup.object().shape({
email: Yup.string().email('Invalid email').required('Email is required'),
password: Yup.lazy(value =>
value === undefined
? Yup.string().required('Password is required')
: Yup.string()
.min(8, 'Password must be at least 8 characters')
.matches(/[A-Z]/, 'Password must contain at least one uppercase letter')
),
});
With lazy validation, Yup only applies the more complex rules when the field has a value. This can significantly speed up validation for large forms.
But what if we want to customize our error messages even further? Maybe we want to include the field name in the error message. We can do that by passing a function instead of a string:
const validationSchema = Yup.object().shape({
email: Yup.string()
.email(({ path }) => `${path} is not a valid email address`)
.required(({ path }) => `${path} is required`),
password: Yup.string()
.min(8, ({ path, min }) => `${path} must be at least ${min} characters`)
.matches(/[A-Z]/, ({ path }) => `${path} must contain at least one uppercase letter`)
.required(({ path }) => `${path} is required`),
});
Now our error messages will include the field name, making them even more clear and specific.
Let’s wrap this up with a final pro tip: testing. When you’re building complex forms with lots of validation rules, it’s crucial to test them thoroughly. Jest works great with Yup for unit testing your schemas:
import * as Yup from 'yup';
const schema = Yup.object().shape({
email: Yup.string().email().required(),
password: Yup.string().min(8).required(),
});
test('valid data passes validation', async () => {
const validData = { email: '[email protected]', password: 'password123' };
await expect(schema.validate(validData)).resolves.toBe(validData);
});
test('invalid email fails validation', async () => {
const invalidData = { email: 'not-an-email', password: 'password123' };
await expect(schema.validate(invalidData)).rejects.toThrow('email must be a valid email');
});
These tests ensure that your validation schema works as expected, catching any issues before they make it to production.
And there you have it! You’re now equipped with the knowledge to create robust, user-friendly forms using Formik and Yup. Remember, form validation isn’t just about keeping bad data out of your system – it’s about guiding your users to success. So go forth and create forms that are a joy to use!