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

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.

The above is the detailed content of Form validation with YUP. For more information, please follow other related articles on the PHP Chinese website!