Validating Forms in React
✅ Validating Forms in React
Form validation is essential for ensuring users enter correct and complete information. In React, you can do form validation in two main ways:
Manual validation (using React state and logic)
Using libraries like Formik and React Hook Form for more complex forms
Let’s look at both approaches.
✋ 1. Manual Form Validation in React
Step-by-Step Example
jsx
Copy
Edit
import React, { useState } from 'react';
function SignupForm() {
const [formData, setFormData] = useState({
username: '',
email: '',
password: ''
});
const [errors, setErrors] = useState({});
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const validate = () => {
const newErrors = {};
if (!formData.username) newErrors.username = 'Username is required';
if (!formData.email.includes('@')) newErrors.email = 'Email is invalid';
if (formData.password.length < 6) newErrors.password = 'Password must be at least 6 characters';
return newErrors;
};
const handleSubmit = (e) => {
e.preventDefault();
const validationErrors = validate();
if (Object.keys(validationErrors).length > 0) {
setErrors(validationErrors);
} else {
setErrors({});
alert('Form submitted successfully!');
// Submit form or call API here
}
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>Username:</label>
<input name="username" value={formData.username} onChange={handleChange} />
{errors.username && <span>{errors.username}</span>}
</div>
<div>
<label>Email:</label>
<input name="email" value={formData.email} onChange={handleChange} />
{errors.email && <span>{errors.email}</span>}
</div>
<div>
<label>Password:</label>
<input name="password" type="password" value={formData.password} onChange={handleChange} />
{errors.password && <span>{errors.password}</span>}
</div>
<button type="submit">Sign Up</button>
</form>
);
}
export default SignupForm;
⚙️ 2. Validating Forms Using Libraries
🧰 Using React Hook Form
Install it:
bash
Copy
Edit
npm install react-hook-form
Example:
jsx
Copy
Edit
import { useForm } from 'react-hook-form';
function RHFForm() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => {
alert(JSON.stringify(data));
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("username", { required: "Username is required" })} />
{errors.username && <p>{errors.username.message}</p>}
<input {...register("email", {
required: "Email is required",
pattern: { value: /^\S+@\S+$/i, message: "Invalid email format" }
})} />
{errors.email && <p>{errors.email.message}</p>}
<input type="password" {...register("password", {
required: "Password is required",
minLength: { value: 6, message: "Minimum 6 characters" }
})} />
{errors.password && <p>{errors.password.message}</p>}
<button type="submit">Submit</button>
</form>
);
}
🧠 Best Practices
Always validate both on client-side and server-side.
Provide real-time feedback (e.g., red borders, error messages).
Use aria- attributes for accessibility.
Use libraries for large or dynamic forms.
🔚 Summary
Method Best For
Manual Validation Simple forms with few fields
React Hook Form Performance and scalability
Formik Larger forms with complex logic
Learn React JS Course in Hyderabad
Read More
Controlled vs Uncontrolled Components
Visit Our Quality Thought Training in Hyderabad
Comments
Post a Comment