Home >Web Front-end >JS Tutorial >Form validation 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.
By the end of this blog, you'll know how to:
Before diving in, make sure you have:
First, install Yup in your React project. Run the following command in your terminal:
npm install yup
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;
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); } };
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';
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;
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.
The above is the detailed content of Form validation with YUP. For more information, please follow other related articles on the PHP Chinese website!