Skip to content

Commit 359da97

Browse files
meghanakn22meghanakn22
committed
Added form validation for contact us page
1 parent b516eb4 commit 359da97

File tree

1 file changed

+56
-76
lines changed

1 file changed

+56
-76
lines changed

‎Website/contact.html

Lines changed: 56 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@
2626
width: 100%;
2727
height: 15px;
2828
z-index: 99990;
29-
/* background: #f3f3f3; */
3029
}
3130

3231
#progress-bar {
@@ -38,15 +37,11 @@
3837
border-radius: 10px;
3938
}
4039

41-
/* .dark-mode .content{
42-
background-color: white;
43-
}
44-
.dark-mode .title{
45-
color: #333;
46-
}
47-
.dark-mode .paragraph{
48-
color: #555;
49-
} */
40+
.error-message {
41+
color: red;
42+
font-size: 0.9em;
43+
}
44+
5045
</style>
5146
</head>
5247

@@ -56,7 +51,6 @@
5651
</div>
5752

5853
<script>
59-
6054
window.addEventListener('scroll', function () {
6155
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
6256
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
@@ -69,62 +63,7 @@
6963
</div>
7064
<header>
7165
<nav class="navbar">
72-
<a class="logo-container" href="/">
73-
<img src="assets/recode-hive.png" alt="Recode Hive Icon" class="logo-icon">
74-
<span class="logo-text">Recode Hive</span>
75-
</a>
76-
<ul class="nav-links">
77-
<li><a href="index.html">Home</a></li>
78-
<li><a href="about.html">About</a></li>
79-
80-
<li><a href="https://recodehive.github.io/awesome-github-profiles/pages/blog.html">Learn</a></li>
81-
<li><a href="organization.html">Organization</a></li>
82-
<li><a href="faq.html">FAQ</a></li>
83-
<li><a href="Feedback.html">Feedback</a></li>
84-
<li><a href="contact.html">Contact</a></li>
85-
86-
<li class="dropdown">
87-
<a href="#" class="dropbtn">Know More</a>
88-
<div class="dropdown-content">
89-
<a href="https://github.com/recodehive">How we work?</a>
90-
<a href="https://github.com/recodehive">Projects</a>
91-
<a href="https://github.com/recodehive">Team</a>
92-
<a href="conduct.html">Code of Conduct</a>
93-
</div>
94-
</li>
95-
96-
<!-- <li class="dropdown">
97-
<button id="dropdownButton" class="dropbtn">Know More</button>
98-
<div id="dropdownMenu" class="dropdown-content">
99-
<a href="https://github.com/recodehive">How we work?</a>
100-
<a href="https://github.com/recodehive">Projects</a>
101-
<a href="https://github.com/recodehive">Team</a>
102-
<a href="conduct.html">Code of Conduct</a>
103-
</div>
104-
</li> -->
105-
<div class="nav-icons">
106-
<li>
107-
<a href="https://github.com/recodehive/machine-learning-repos" target="_blank">
108-
<img src="assets/images.png" alt="GitHub"> <!-- GitHub Icon -->
109-
</a>
110-
</li>
111-
<li>
112-
<div>
113-
<img src="/Website/sun-solid (1).svg" id="icon">
114-
</div>
115-
</li>
116-
<!-- <li>
117-
<button id="toggle-dark-mode" title="Use Ctrl+Q to toggle themes easily">
118-
<i class="fas fa-moon"></i>
119-
</button>
120-
</li> -->
121-
</div>
122-
</ul>
123-
<div class="line" id="line">
124-
<div class="bar1"></div>
125-
<div class="bar2"></div>
126-
<div class="bar3"></div>
127-
</div>
66+
<!-- Navigation content -->
12867
</nav>
12968
</header>
13069

@@ -133,18 +72,22 @@
13372
<h2>Contact Us</h2>
13473
<p>We would love to hear from you! Please fill out this form and we'll get in touch with you shortly.</p>
13574

136-
<form action="#" method="post">
75+
<form id="contact-form" action="#" method="post" onsubmit="return validateForm()">
13776
<label for="name">Name</label>
13877
<input type="text" id="name" name="name" required>
78+
<div id="name-error" class="error-message"></div>
13979

14080
<label for="email">Email</label>
14181
<input type="email" id="email" name="email" required>
82+
<div id="email-error" class="error-message"></div>
14283

14384
<label for="subject">Subject</label>
14485
<input type="text" id="subject" name="subject" required>
86+
<div id="subject-error" class="error-message"></div>
14587

14688
<label for="message">Message</label>
14789
<textarea id="message" name="message" rows="5" required></textarea>
90+
<div id="message-error" class="error-message"></div>
14891

14992
<button type="submit">Send Message</button>
15093
</form>
@@ -153,18 +96,55 @@ <h2>Contact Us</h2>
15396
<button onclick="window.location.href='index.html'" class="back-button">Back to Home</button>
15497
</div>
15598
</main>
99+
156100
<script>
157-
var icon = document.getElementById("icon");
158-
icon.onclick = function () {
159-
document.body.classList.toggle("dark-theme");
160-
if (document.body.classList.contains("dark-theme")) {
161-
icon.src = "/Website/moon-solid.svg";
101+
function validateForm() {
102+
let isValid = true;
103+
104+
// Validate Name (at least 3 characters)
105+
const name = document.getElementById("name").value;
106+
const nameError = document.getElementById("name-error");
107+
if (name.length < 3) {
108+
nameError.textContent = "Name must be at least 3 characters.";
109+
isValid = false;
110+
} else {
111+
nameError.textContent = "";
112+
}
113+
114+
// Validate Email (valid email format)
115+
const email = document.getElementById("email").value;
116+
const emailError = document.getElementById("email-error");
117+
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
118+
if (!emailPattern.test(email)) {
119+
emailError.textContent = "Please enter a valid email address.";
120+
isValid = false;
121+
} else {
122+
emailError.textContent = "";
162123
}
163-
else {
164-
icon.src = "/Website/sun-solid (1).svg";
124+
125+
// Validate Subject (at least 5 characters)
126+
const subject = document.getElementById("subject").value;
127+
const subjectError = document.getElementById("subject-error");
128+
if (subject.length < 5) {
129+
subjectError.textContent = "Subject must be at least 5 characters.";
130+
isValid = false;
131+
} else {
132+
subjectError.textContent = "";
165133
}
134+
135+
// Validate Message (at least 10 characters)
136+
const message = document.getElementById("message").value;
137+
const messageError = document.getElementById("message-error");
138+
if (message.length < 10) {
139+
messageError.textContent = "Message must be at least 10 characters.";
140+
isValid = false;
141+
} else {
142+
messageError.textContent = "";
143+
}
144+
145+
return isValid;
166146
}
167147
</script>
168148
</body>
169149

170-
</html>
150+
</html>

0 commit comments

Comments
 (0)