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: