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.
The above is the detailed content of Form validation with YUP. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

In JavaScript, choosing a single-line comment (//) or a multi-line comment (//) depends on the purpose and project requirements of the comment: 1. Use single-line comments for quick and inline interpretation; 2. Use multi-line comments for detailed documentation; 3. Maintain the consistency of the comment style; 4. Avoid over-annotation; 5. Ensure that the comments are updated synchronously with the code. Choosing the right annotation style can help improve the readability and maintainability of your code.

Yes,JavaScriptcommentsarenecessaryandshouldbeusedeffectively.1)Theyguidedevelopersthroughcodelogicandintent,2)arevitalincomplexprojects,and3)shouldenhanceclaritywithoutclutteringthecode.

Java and JavaScript are different programming languages, each suitable for different application scenarios. Java is used for large enterprise and mobile application development, while JavaScript is mainly used for web page development.

JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic

CommentsarecrucialinJavaScriptformaintainingclarityandfosteringcollaboration.1)Theyhelpindebugging,onboarding,andunderstandingcodeevolution.2)Usesingle-linecommentsforquickexplanationsandmulti-linecommentsfordetaileddescriptions.3)Bestpracticesinclud

JavaScripthasseveralprimitivedatatypes:Number,String,Boolean,Undefined,Null,Symbol,andBigInt,andnon-primitivetypeslikeObjectandArray.Understandingtheseiscrucialforwritingefficient,bug-freecode:1)Numberusesa64-bitformat,leadingtofloating-pointissuesli

JavaScriptispreferredforwebdevelopment,whileJavaisbetterforlarge-scalebackendsystemsandAndroidapps.1)JavaScriptexcelsincreatinginteractivewebexperienceswithitsdynamicnatureandDOMmanipulation.2)Javaoffersstrongtypingandobject-orientedfeatures,idealfor

The following points should be noted when processing dates and time in JavaScript: 1. There are many ways to create Date objects. It is recommended to use ISO format strings to ensure compatibility; 2. Get and set time information can be obtained and set methods, and note that the month starts from 0; 3. Manually formatting dates requires strings, and third-party libraries can also be used; 4. It is recommended to use libraries that support time zones, such as Luxon. Mastering these key points can effectively avoid common mistakes.
