BHARATIYA VIDYA BHAVAN’S
SARDAR PATEL INSTITUTE OF TECHNOLOGY
Munshi nagar, Andheri (W) ,Mumbai - 400058
(Autonomous Institute Affiliated to University of Mumbai)
[Department of Computer Science and Engineering (Master of Computer
Applications)]
CLASS: F.Y. MCA SEM: I AY:24-25
COURSE CODE: MC504
SUBJECT NAME: WEB TECHNOLOGY LAB
ROLL NO. : 2024510045 BATCH: A
NAME: Disha Phonde
EXPERIMENT NO: 06
EXPERIMENT TITLE:Create a React application with a user-friendly form that includes
validation,submission, and reset functionalities.
Code:
App.js
import React, { useState } from "react";
import "./App.css";
const App = () => {
const [formData, setFormData] = useState({
username: "",
email: "",
password: "",
});
const [errors, setErrors] = useState({});
const [successMessage, setSuccessMessage] = useState("");
// Validation Functions
const validateUsername = (username) => {
if (!username.trim()) return "Username is required.";
return "";
};
const validateEmail = (email) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!email.trim()) return "Email is required.";
if (!emailRegex.test(email)) return "Email address is invalid.";
return "";
};
const validatePassword = (password) => {
const passwordRegex =
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/
;
if (!password.trim()) return "Password is required.";
if (!passwordRegex.test(password))
return "Password must be at least 6 characters long and include
uppercase, lowercase, numbers, and symbols.";
return "";
};
// Handle form submission
const handleSubmit = (e) => {
e.preventDefault();
const newErrors = {
username: validateUsername(formData.username),
email: validateEmail(formData.email),
password: validatePassword(formData.password),
};
setErrors(newErrors);
// Check if there are no errors
if (!Object.values(newErrors).some((error) => error)) {
console.log("Form Submitted Successfully:", formData);
setSuccessMessage("Form submitted successfully!");
setFormData({ username: "", email: "", password: "" });
setErrors({});
} else {
setSuccessMessage("");
};
// Handle input changes
const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};
// Reset form
const handleReset = () => {
setFormData({ username: "", email: "", password: "" });
setErrors({});
setSuccessMessage("");
};
return (
<div className="app">
<h1>React Form with Validation</h1>
{successMessage && <p
className="success-message">{successMessage}</p>}
<form onSubmit={handleSubmit}>
{/* Username Field */}
<div className="form-group">
<label>Username:</label>
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
placeholder="Enter your username"
/>
{errors.username && <p
className="error-message">{errors.username}</p>}
</div>
{/* Email Field */}
<div className="form-group">
<label>Email:</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Enter your email"
/>
{errors.email && <p
className="error-message">{errors.email}</p>}
</div>
{/* Password Field */}
<div className="form-group">
<label>Password:</label>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
placeholder="Enter your password"
/>
{errors.password && <p
className="error-message">{errors.password}</p>}
</div>
{/* Buttons */}
<div className="form-actions">
<button type="submit">Submit</button>
<button type="button" onClick={handleReset}>
Reset
</button>
</div>
</form>
</div>
);
};
export default App;
App.css
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
.app {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 400px;
text-align: center;
h1 {
color: #333;
.form-group {
margin-bottom: 20px;
text-align: left;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.error-message {
color: #d9534f;
font-size: 0.9em;
margin-top: 5px;
.success-message {
color: #5cb85c;
font-size: 1em;
margin-bottom: 20px;
}
.form-actions button {
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 4px;
cursor: pointer;
.form-actions button[type="submit"] {
background-color: #007bff;
color: white;
}
.form-actions button[type="submit"]:hover {
background-color: #0056b3;
.form-actions button[type="button"] {
background-color: #6c757d;
color: white;
.form-actions button[type="button"]:hover {
background-color: #5a6268;
Output:
