Simplify your Form Validation in React with Yup
When building web applications, form validation is key to ensuring data integrity. If you're looking for a simple yet powerful way to validate forms in React, Yup is your best friend! This blog will walk you through the steps to set up Yup and create a polished form with validation.
What You’ll Learn
By the end of this blog, you'll know how to:
- Set up Yup for validation in React.
- Build a form with validation rules.
- Style your form using external CSS.
Prerequisites
Before diving in, make sure you have:
- Basic knowledge of React.
- Node.js installed on your computer.
Step 1: Setting Up Yup
First, install Yup in your React project. Run the following command in your terminal:
npm install yup
Step 2: Creating the Form
Here's a simple form with fields for a name and email. We'll use React's useState to manage input values and errors.
import React, { useState } from 'react';
function MyForm() {
const [formData, setFormData] = useState({ name: '', email: '' });
const [errors, setErrors] = useState({});
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = (e) => {
e.preventDefault();
// Validation will go here
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
</div>
<div>
<label>Email:</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
</div>
<button type="submit">Submit</button>
</form>
);
}
export default MyForm;
Step 3:
Now it is time to integrate Yup. I'll be creating a validation schema and then check the form data once submitted.
import * as Yup from "yup"
const validationSchema = Yup.object({
name: Yup.string().required('Name is required!')
email: Yup.string().email('Your email is invalid').required('email is required')
})
I'll use this schema in the handleSubmit function to validate the form
const handleSubmit = (e) => {
e.preventDefault();
try {
await validationSchema.validate(formData, { abortEarly: false });
setErrors({});
alert('Form is valid!');
} catch (err) {
const newErrors = {};
err.inner.forEach((error) => {
newErrors[error.path] = error.message;
});
setErrors(newErrors);
}
};
Step 4: Styling the form
To make the form look good, create an external CSS file (MyForm.css) and add these styles:
.form-container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
background: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.label {
font-weight: bold;
}
.input {
width: 100%;
padding: 10px;
margin: 5px 0;
border-radius: 4px;
}
.error {
color: red;
font-size: 12px;
}
.button {
background: #4caf50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.button:hover {
background: #45a049;
}
Import the CSS file into your component:
import './MyForm.css';
Full Code:
import React, { useState } from 'react';
import * as Yup from 'yup';
import './MyForm.css';
function MyForm() {
const [formData, setFormData] = useState({ name: '', email: '' });
const [errors, setErrors] = useState({});
const validationSchema = Yup.object({
name: Yup.string().required('Name is required!'),
email: Yup.string().email('Invalid email!').required('Email is required!'),
});
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = async (e) => {
e.preventDefault();
try {
await validationSchema.validate(formData, { abortEarly: false });
setErrors({});
alert('Form is valid!');
} catch (err) {
const newErrors = {};
err.inner.forEach((error) => {
newErrors[error.path] = error.message;
});
setErrors(newErrors);
}
};
return (
<div className="form-container">
<h1>Simple Form</h1>
<form onSubmit={handleSubmit}>
<div>
<label className="label">Name:</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
className="input"
/>
{errors.name && <div className="error">{errors.name}</div>}
</div>
<div>
<label className="label">Email:</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
className="input"
/>
{errors.email && <div className="error">{errors.email}</div>}
</div>
<button type="submit" className="button">Submit</button>
</form>
</div>
);
}
export default MyForm;
Conclusion
Yup is a powerful tool for form validation, even without Formik. With just a few lines of code, you can add robust validation to your React apps.
Top comments (0)