Scribd
Upload
11 views15 pages

Webtech Akshay 16137mailvalidatoin

The document outlines an experiment for creating a web-based user detail form that includes email validation and a modal popup for displaying user information. It details the use of HTML for structure, CSS for styling, and JavaScript for functionality, including input validation and modal interactions. The experiment successfully demonstrates how to enhance user experience and ensure data integrity through real-time feedback mechanisms.

Uploaded by

bhargavchaudhary5200
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views15 pages

Webtech Akshay 16137mailvalidatoin

The document outlines an experiment for creating a web-based user detail form that includes email validation and a modal popup for displaying user information. It details the use of HTML for structure, CSS for styling, and JavaScript for functionality, including input validation and modal interactions. The experiment successfully demonstrates how to enhance user experience and ensure data integrity through real-time feedback mechanisms.

Uploaded by

bhargavchaudhary5200
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

Batch: MCA-SPZ-CYBER-SECURITY-II-B1_Web Technologies

Student Name: AKSHAY TYAGI

Enrollment No: 590016317

Experiment No.: [03]


Experiment Name: [User Detail Form with Email Validation and Modal
Popup]
Date: [13/02/2025]

Objective: Design a web-based form that validates the user's email


and displays the entered details in a modal popup to enhance user
experience and ensure data integrity.

Theory/Concepts:

In modern web development, user input validation and user-


friendly interfaces are crucial components to ensure data integrity
and enhance user experience. This experiment focuses on these
aspects by implementing a user detail form with email validation
and a modal popup.

1. HTML (Hypertext Markup Language): HTML is the


standard language for creating web pages and web
applications. In this experiment, HTML is used to create the
structure of the user detail form, including input fields and
buttons.
2. CSS (Cascading Style Sheets): CSS is used to style the
HTML elements and improve the visual appearance of the
web page. In this experiment, CSS is utilized to style the
form and modal popup, making the interface more attractive
and user-friendly.

1
Batch: MCA-SPZ-CYBER-SECURITY-II-B1_Web Technologies

3. JavaScript: JavaScript is a programming language used to


create dynamic and interactive web pages. In this
experiment, JavaScript is employed to:
o Validate the email address format using regular
expressions.
o Display alert messages if the email is invalid.
o Show a modal popup with the entered details upon
successful form submission.
o Provide interactive features like closing the modal when
clicking outside of it or on the close button.

Detailed Steps:
1. Form Creation: Use HTML to create a form with an email
input field and a submit button.
2. Styling: Use CSS to style the form and modal popup,
ensuring they are visually appealing and responsive.
3. Email Validation: Implement JavaScript to validate the
email address format using a regular expression.
4. Modal Popup: Use JavaScript to display a modal popup with
the user's entered details upon form submission.
5. Interactive Features: Add features to close the modal
when clicking on the close button or outside the modal.
By integrating these technologies, the experiment demonstrates
how to create a functional and aesthetically pleasing web form
with real-time validation and user feedback mechanisms. This
approach ensures that users are aware of any input errors
immediately and provides a seamless interaction with the web
application.

2
Batch: MCA-SPZ-CYBER-SECURITY-II-B1_Web Technologies

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>User Detail Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.form-container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
3
Batch: MCA-SPZ-CYBER-SECURITY-II-B1_Web Technologies

}
form h2 {
margin-top: 0;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="tel"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 15px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;

4
Batch: MCA-SPZ-CYBER-SECURITY-II-B1_Web Technologies

}
button:hover {
background-color: #0056b3;
}
/* Modal styles */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;

5
Batch: MCA-SPZ-CYBER-SECURITY-II-B1_Web Technologies

padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
animation: slideIn 0.5s;
color: orange; /* Change text color to orange */
}
@keyframes slideIn {
from { transform: translateY(-50px); }
to { transform: translateY(0); }
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;

6
Batch: MCA-SPZ-CYBER-SECURITY-II-B1_Web Technologies

}
.modal-footer {
text-align: right;
}
.footer {
margin-top: 20px;
font-size: 14px;
color: #555;
}
</style>
<script>
document.addEventListener('DOMContentLoaded',
function() {

document.getElementById('userForm').addEventListener('
submit', function(event) {
event.preventDefault(); // Prevent the form
from submitting the default way

let email =
document.getElementById('email').value;
let name =
document.getElementById('name').value;
let phone =
document.getElementById('phone').value;
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+
$/;
7
Batch: MCA-SPZ-CYBER-SECURITY-II-B1_Web Technologies

let phonePattern = /^\d{10}$/;

if (!emailPattern.test(email)) {
alert('Please enter a valid email address.');
} else if (!phonePattern.test(phone)) {
alert('Please enter a valid 10-digit phone
number.');
} else {
// Display the user's details in the modal

document.getElementById('modalName').innerText =
name;

document.getElementById('modalEmail').innerText =
email;

document.getElementById('modalPhone').innerText =
phone;

document.getElementById('myModal').style.display =
'block';
}
});

// Close the modal when the user clicks on <span>


(x) or the close button at the bottom

8
Batch: MCA-SPZ-CYBER-SECURITY-II-B1_Web Technologies

document.getElementsByClassName('close')
[0].onclick = function() {

document.getElementById('myModal').style.display =
'none';
}
document.getElementById('closeBtn').onclick =
function() {

document.getElementById('myModal').style.display =
'none';
}

// Resubmit the form when the user clicks on the


resubmit button
document.getElementById('resubmitBtn').onclick =
function() {

document.getElementById('myModal').style.display =
'none';
document.getElementById('userForm').submit();
}

// Close the modal when the user clicks anywhere


outside of the modal
window.onclick = function(event) {
if (event.target ==
document.getElementById('myModal')) {

9
Batch: MCA-SPZ-CYBER-SECURITY-II-B1_Web Technologies

document.getElementById('myModal').style.display =
'none';
}
}
});
</script>
</head>
<body>
<h1>Tech Burner</h1>
<div class="form-container">
<form id="userForm">
<h2>User Details</h2>
<label for="name">Name:</label>
<input type="text" id="name" name="name"
required>
<label for="email">Email:</label>
<input type="email" id="email" name="email"
required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone"
required>
<button type="submit">Submit</button>
</form>
</div>

10
Batch: MCA-SPZ-CYBER-SECURITY-II-B1_Web Technologies

<!-- The Modal -->


<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>User Details</h2>
<p><strong>Name:</strong> <span
id="modalName"></span></p>
<p><strong>Email:</strong> <span
id="modalEmail"></span></p>
<p><strong>Phone Number:</strong> <span
id="modalPhone"></span></p>
<p>Thank you for submitting your details!</p>
<!-- Thank you message -->
<div class="modal-footer">
<button id="closeBtn">Close</button>
<button id="resubmitBtn">Resubmit</button>
</div>
</div>
</div>

<div class="footer">
Contact: akshaytygaiji8@gmail.com
</div>
</body>
</html>

11
Batch: MCA-SPZ-CYBER-SECURITY-II-B1_Web Technologies

Output:

(Insert a screenshot of the webpage here)

12
Batch: MCA-SPZ-CYBER-SECURITY-II-B1_Web Technologies

13
Batch: MCA-SPZ-CYBER-SECURITY-II-B1_Web Technologies

Result:

The webpage was successfully created and displayed

14
Batch: MCA-SPZ-CYBER-SECURITY-II-B1_Web Technologies

The form submitted successfully.

15

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy