Introduction
Form Validation ka use React applications mein user ke entered data ko check karne ke liye hota hai. Validation ensure karti hai ki required fields empty na hon aur information correct format mein enter ki gayi ho. React mein validation state, event handlers aur conditional rendering ke through implement ki ja sakti hai. Is chapter mein hum required fields, email, password, confirm password aur practical registration form validation ke solved examples dekhenge. React js Form Validation practice questions with solutions help to understand the concepts.
1. What is Form Validation in React?
Answer:
Form Validation ka matlab hai user ke entered data ko check karna before accepting or submitting the form.
For example, registration form mein hum check kar sakte hain:
- Name empty nahi hona chahiye.
- Email valid format mein hona chahiye.
- Password minimum length ka hona chahiye.
- Confirm password password se match hona chahiye.
Example:
import { useState } from "react";
function App() {
const [name, setName] = useState("");
function handleSubmit(event) {
event.preventDefault();
if (name.trim() === "") {
alert("Name is required");
return;
}
alert("Form submitted");
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={(event) => setName(event.target.value)}
placeholder="Enter your name"
/>
<button type="submit">
Submit
</button>
</form>
);
}
export default App;
Yahan form submit hone se pehle check kiya ja raha hai ki name empty hai ya nahi.
2. How do you validate a required field in React?
Answer:
Required field ko validate karne ke liye check kar sakte hain ki input empty hai ya nahi.
Example:
function handleSubmit(event) {
event.preventDefault();
if (name.trim() === "") {
setError("Name is required");
return;
}
setError("");
}
Complete example:
import { useState } from "react";
function App() {
const [name, setName] = useState("");
const [error, setError] = useState("");
function handleSubmit(event) {
event.preventDefault();
if (name.trim() === "") {
setError("Name is required");
return;
}
setError("");
alert("Form submitted successfully");
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={(event) => setName(event.target.value)}
placeholder="Enter your name"
/>
{error && <p>{error}</p>}
<button type="submit">
Submit
</button>
</form>
);
}
export default App;
trim() unnecessary spaces ko remove karke empty input ko properly check karne mein help karta hai.
3. How do you validate an email address in React?
Answer:
Email validation ke liye basic pattern check karne ke liye regular expression use kiya ja sakta hai.
Example:
const emailPattern =
/^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
setError("Please enter a valid email");
return;
}
Complete example:
import { useState } from "react";
function App() {
const [email, setEmail] = useState("");
const [error, setError] = useState("");
function handleSubmit(event) {
event.preventDefault();
const emailPattern =
/^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
setError("Please enter a valid email");
return;
}
setError("");
alert("Valid email");
}
return (
<form onSubmit={handleSubmit}>
<input
type="email"
value={email}
onChange={(event) => setEmail(event.target.value)}
placeholder="Enter email"
/>
{error && <p>{error}</p>}
<button type="submit">
Submit
</button>
</form>
);
}
export default App;
Agar entered email basic expected format follow nahi karta, error message display hoga.
4. How do you validate password length in React?
Answer:
Password ki minimum length check kar sakte hain.
Example:
if (password.length < 8) {
setError("Password must be at least 8 characters");
return;
}
Complete example:
import { useState } from "react";
function App() {
const [password, setPassword] = useState("");
const [error, setError] = useState("");
function handleSubmit(event) {
event.preventDefault();
if (password.length < 8) {
setError("Password must be at least 8 characters");
return;
}
setError("");
alert("Password is valid");
}
return (
<form onSubmit={handleSubmit}>
<input
type="password"
value={password}
onChange={(event) => setPassword(event.target.value)}
placeholder="Enter password"
/>
{error && <p>{error}</p>}
<button type="submit">
Submit
</button>
</form>
);
}
export default App;
Yahan password ki length minimum 8 characters check ki ja rahi hai.
5. How do you validate Confirm Password in React?
Answer:
Confirm password validation mein check kiya jata hai ki password aur confirm password same hain ya nahi.
Example:
if (password !== confirmPassword) {
setError("Passwords do not match");
return;
}
Complete example:
import { useState } from "react";
function App() {
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [error, setError] = useState("");
function handleSubmit(event) {
event.preventDefault();
if (password !== confirmPassword) {
setError("Passwords do not match");
return;
}
setError("");
alert("Passwords match");
}
return (
<form onSubmit={handleSubmit}>
<input
type="password"
value={password}
onChange={(event) => setPassword(event.target.value)}
placeholder="Password"
/>
<input
type="password"
value={confirmPassword}
onChange={(event) =>
setConfirmPassword(event.target.value)
}
placeholder="Confirm Password"
/>
{error && <p>{error}</p>}
<button type="submit">
Register
</button>
</form>
);
}
export default App;
Agar dono passwords different hain, form submission stop ho jayegi.
6. How do you display validation error messages in React?
Answer:
Validation errors ko state mein store karke conditionally display kar sakte hain.
Example:
import { useState } from "react";
function App() {
const [name, setName] = useState("");
const [error, setError] = useState("");
function handleSubmit(event) {
event.preventDefault();
if (name.trim() === "") {
setError("Please enter your name");
return;
}
setError("");
}
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
onChange={(event) => setName(event.target.value)}
placeholder="Name"
/>
{error && (
<p>{error}</p>
)}
<button type="submit">
Submit
</button>
</form>
);
}
export default App;
Yahan:
{error && <p>{error}</p>}
ka matlab hai ki error message tabhi render hoga jab error mein value available hogi.
7. How do you validate multiple fields in a React form?
Answer:
Multiple fields ke liye har field ke validation rules ko check kar sakte hain.
Example:
function validateForm() {
const errors = {};
if (name.trim() === "") {
errors.name = "Name is required";
}
if (email.trim() === "") {
errors.email = "Email is required";
}
if (password.length < 8) {
errors.password =
"Password must be at least 8 characters";
}
return errors;
}
Is approach mein errors ko ek object mein store kiya ja sakta hai:
{
name: "Name is required",
email: "Email is required"
}
Then UI mein individual errors display kar sakte hain.
Ye approach large forms mein separate error variables maintain karne ke comparison mein more organized ho sakti hai.
8. How do you validate a form before submission?
Answer:
Form submit hone par pehle validation function run kar sakte hain.
Example:
function validateForm() {
if (name.trim() === "") {
return "Name is required";
}
if (email.trim() === "") {
return "Email is required";
}
return "";
}
Then:
function handleSubmit(event) {
event.preventDefault();
const errorMessage = validateForm();
if (errorMessage) {
setError(errorMessage);
return;
}
setError("");
alert("Form submitted successfully");
}
Is flow mein:
Submit Form
↓
Validate Data
↓
Errors Found?
↙ ↘
Yes No
↓ ↓
Show Error Submit
Isse invalid data ko submit hone se pehle roka ja sakta hai.
9. How do you validate a select field in React?
Answer:
Agar user ko dropdown se course select karna mandatory hai, toh initial empty value ko validate kar sakte hain.
Example:
import { useState } from "react";
function App() {
const [course, setCourse] = useState("");
const [error, setError] = useState("");
function handleSubmit(event) {
event.preventDefault();
if (course === "") {
setError("Please select a course");
return;
}
setError("");
alert("Course selected");
}
return (
<form onSubmit={handleSubmit}>
<select
value={course}
onChange={(event) => setCourse(event.target.value)}
>
<option value="">Select Course</option>
<option value="react">React.js</option>
<option value="python">Python</option>
<option value="node">Node.js</option>
</select>
{error && <p>{error}</p>}
<button type="submit">
Submit
</button>
</form>
);
}
export default App;
Agar user "Select Course" par hi hai, toh error message show hoga.
10. Build a Practical Registration Form with Validation.
Answer:
Ab ek practical registration form banate hain jisme:
- Name validation
- Email validation
- Password validation
- Confirm password validation
- Course selection validation
include honge.
import { useState } from "react";
function RegistrationForm() {
const [formData, setFormData] = useState({
name: "",
email: "",
password: "",
confirmPassword: "",
course: ""
});
const [errors, setErrors] = useState({});
function handleChange(event) {
const { name, value } = event.target;
setFormData((previousData) => ({
...previousData,
[name]: value
}));
}
function validateForm() {
const newErrors = {};
const emailPattern =
/^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (formData.name.trim() === "") {
newErrors.name = "Name is required";
}
if (formData.email.trim() === "") {
newErrors.email = "Email is required";
} else if (!emailPattern.test(formData.email)) {
newErrors.email = "Enter a valid email";
}
if (formData.password.length < 8) {
newErrors.password =
"Password must be at least 8 characters";
}
if (
formData.password !==
formData.confirmPassword
) {
newErrors.confirmPassword =
"Passwords do not match";
}
if (formData.course === "") {
newErrors.course = "Please select a course";
}
return newErrors;
}
function handleSubmit(event) {
event.preventDefault();
const validationErrors = validateForm();
if (Object.keys(validationErrors).length > 0) {
setErrors(validationErrors);
return;
}
setErrors({});
alert("Registration successful");
}
return (
<form onSubmit={handleSubmit}>
<h2>Student Registration</h2>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
placeholder="Enter your name"
/>
{errors.name && <p>{errors.name}</p>}
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Enter your email"
/>
{errors.email && <p>{errors.email}</p>}
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
placeholder="Enter password"
/>
{errors.password && (
<p>{errors.password}</p>
)}
<input
type="password"
name="confirmPassword"
value={formData.confirmPassword}
onChange={handleChange}
placeholder="Confirm password"
/>
{errors.confirmPassword && (
<p>{errors.confirmPassword}</p>
)}
<select
name="course"
value={formData.course}
onChange={handleChange}
>
<option value="">Select Course</option>
<option value="react">React.js</option>
<option value="python">Python</option>
<option value="node">Node.js</option>
</select>
{errors.course && (
<p>{errors.course}</p>
)}
<button type="submit">
Register
</button>
</form>
);
}
export default RegistrationForm;
How this example works:
Form data ek object mein store kiya gaya hai:
const [formData, setFormData] = useState({
name: "",
email: "",
password: "",
confirmPassword: "",
course: ""
});
Validation ke errors separate object mein store hote hain:
const [errors, setErrors] = useState({});
validateForm() har field ke rules check karta hai.
Agar errors milte hain:
setErrors(validationErrors);
aur form submission stop ho jati hai.
Agar koi validation error nahi hai:
setErrors({});
alert("Registration successful");
Form successfully submit process kar sakta hai.
Key Takeaways
- Form Validation user ke entered data ko check karti hai.
- Required fields ko empty value ke against validate kiya ja sakta hai.
trim()blank spaces ko handle karne mein useful hai.- Email validation ke liye basic pattern check use kiya ja sakta hai.
- Password ki minimum length validate ki ja sakti hai.
- Confirm Password ko original Password ke saath compare kiya ja sakta hai.
- Validation errors ko React state mein store kiya ja sakta hai.
- Multiple field errors ko ek object mein manage karna practical approach hai.
- Form submission se pehle validation run karna important hai.
- Client-side validation user experience improve karti hai, lekin server-side validation ko replace nahi karti.
FAQs
1. What is Form Validation in React?
Form Validation is the process of checking user-entered form data before accepting or submitting it.
2. How do you check if a required input is empty?
You can check the input value, often using value.trim() === "", and display an appropriate validation message.
3. How can you validate an email in React?
You can use a suitable validation rule or regular expression to check whether the email follows an expected format.
4. How do you validate password confirmation?
Compare the password and confirm-password values. If they are different, display an error message.
5. Can validation errors be stored in React state?
Yes. Validation errors can be stored in state, often as an object containing errors for different fields.
6. When should form validation run?
Validation can run during input changes, when a field loses focus, on form submission, or through a combination of these approaches depending on the user experience required.
7. Is client-side validation enough for a real application?
No. Client-side validation improves user experience, but important data validation must also be performed on the server because client-side code can be bypassed.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
