DEV Community

Cover image for Form validation with YUP
Lawani Elyon John
Lawani Elyon John

Posted on

Form validation with YUP

#javascript #webdev #react #beginners

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:

  1. Set up Yup for validation in React.
  2. Build a form with validation rules.
  3. 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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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') })
Enter fullscreen mode Exit fullscreen mode

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); } };
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

Import the CSS file into your component:

import './MyForm.css';
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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)