-
Notifications
You must be signed in to change notification settings - Fork 348
/
contact.js
170 lines (144 loc) · 5.37 KB
/
contact.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
// document.getElementById("contactForm").addEventListener("submit", function (e) {
// e.preventDefault();
// // Basic form validation
// let fullname = document.getElementById("fullname").value;
// let email = document.getElementById("email").value;
// let phone = document.getElementById("phone").value;
// let message = document.getElementById("message").value;
// // Error elements
// let nameError = document.getElementById("nameError");
// let emailError = document.getElementById("emailError");
// let phoneError = document.getElementById("phoneError");
// let messageError = document.getElementById("messageError");
// // Clear previous error messages
// nameError.textContent = "";
// emailError.textContent = "";
// phoneError.textContent = "";
// messageError.textContent = "";
// let hasError = false;
// // Validate name (must be more than 1 character and contain letters only)
// if (fullname.length < 2 || !/^[a-zA-Z\s]+$/.test(fullname)) {
// nameError.textContent =
// "Name must be at least 2 characters long and contain only letters.";
// nameError.style.display = "block";
// hasError = true;
// }
// // Validate email format
// if (!isValidEmail(email)) {
// emailError.textContent = "Please enter a valid email address.";
// emailError.style.display = "block";
// hasError = true;
// }
// if (!isValidPhone(phone)) {
// phoneError.textContent =
// "Please enter a valid phone number (e.g., +1234567890).";
// phoneError.style.display = "block";
// hasError = true;
// }
// // Validate message (must be more than 1 character)
// if (message.length < 2) {
// messageError.textContent = "Message must be at least 2 characters long.";
// messageError.style.display = "block";
// hasError = true;
// }
// // If there are no errors, proceed with form submission
// if (!hasError) {
// // If validation passes, you can submit the form data to your server here
// console.log("Form submitted:", { fullname, email, phone, message });
// alert("Thank you for your message. We will get back to you soon!");
// this.reset();
// }
// });
function isValidEmail(email) {
// Regular expression for stricter email validation
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
// Check for the basic format
if (!emailRegex.test(email)) {
return false;
}
// Split the email into local part and domain part
const [localPart, domainPart] = email.split("@");
// Ensure local part and domain part exist and aren't too long
if (localPart.length > 64 || domainPart.length > 255) {
return false;
}
// Ensure domain part has a valid format
const domainParts = domainPart.split(".");
if (domainParts.some((part) => part.length > 63)) {
return false;
}
// Additional checks for edge cases
if (
localPart.startsWith(".") ||
localPart.endsWith(".") ||
localPart.includes("..")
) {
return false;
}
return true;
}
function isValidPhone(phone) {
return /^\+?[1-9]\d{1,14}$/.test(phone); // e.g., +1234567890
}
document.addEventListener("DOMContentLoaded", function () {
const modeToggle = document.getElementById("modeToggle");
const sunIcon = document.querySelector(".sun-icon");
const moonIcon = document.querySelector(".moon-icon");
// Check if the user has a saved mode preference
const currentMode = localStorage.getItem("mode");
if (currentMode === "dark") {
document.body.classList.add("dark-mode");
moonIcon.style.display = "block";
sunIcon.style.display = "none";
}
// Toggle the mode when the button is clicked
modeToggle.addEventListener("click", function () {
document.body.classList.toggle("dark-mode");
if (document.body.classList.contains("dark-mode")) {
moonIcon.style.display = "block";
sunIcon.style.display = "none";
localStorage.setItem("mode", "dark"); // Save the user's preference
} else {
moonIcon.style.display = "none";
sunIcon.style.display = "block";
localStorage.setItem("mode", "light"); // Save the user's preference
}
});
});
document.getElementById("contactForm").addEventListener("submit", async (e) => {
e.preventDefault();
const name = document.getElementById("fullname").value;
const email = document.getElementById("email").value;
const phone = document.getElementById("phone").value;
const message = document.getElementById("message").value;
//validations
if (!name || !email || !phone || !message) {
alert("Please fill out all fields");
return;
}
const formData = {
Name: name,
Email: email,
Phone: phone,
Message: message,
};
try {
// call tha api
const response = await fetch("http://localhost:5000/api/contact/email", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
});
if (response.ok) {
alert("Message sent successfully!");
document.getElementById("contactForm").reset();
} else {
alert("There was an error sending the message. Please try again.");
}
} catch (error) {
console.error("Error sending message:", error);
alert("Network error. Please check your connection.");
}
});