94 lines
3.4 KiB
JavaScript
94 lines
3.4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const feedbackForm = document.querySelector('#feedback-form form');
|
|
const nameInput = document.getElementById('name');
|
|
const emailInput = document.getElementById('email');
|
|
const phoneInput = document.getElementById('tel');
|
|
const messageInput = document.getElementById('message');
|
|
|
|
const alertBox = document.getElementById('custom-alert');
|
|
const alertMessage = document.getElementById('alert-message');
|
|
const alertOkButton = document.getElementById('alert-ok-button');
|
|
const alertCloseButton = document.getElementById('alert-close-btn');
|
|
|
|
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; // Email validation regex
|
|
const phoneRegex = /^[0-9]{10,15}$/; // Phone validation regex (10-15 digits)
|
|
const nameRegex = /^[a-zA-Z\s]{2,}$/; // Name validation regex (at least 2 letters)
|
|
const sqlInjectionRegex = /[;'"\\]/; // Prevent SQL injection-like characters
|
|
|
|
// Form submission handler
|
|
feedbackForm.addEventListener('submit', (event) => {
|
|
event.preventDefault(); // Prevent form submission and page refresh
|
|
|
|
const name = nameInput.value.trim();
|
|
const email = emailInput.value.trim();
|
|
const phone = phoneInput.value.trim();
|
|
const message = messageInput.value.trim();
|
|
|
|
// Validate each field
|
|
if (!nameRegex.test(name)) {
|
|
showCustomAlert('Please enter a valid name (letters and spaces only).');
|
|
return;
|
|
}
|
|
|
|
if (!emailRegex.test(email)) {
|
|
showCustomAlert('Please enter a valid email address.');
|
|
return;
|
|
}
|
|
|
|
if (!phoneRegex.test(phone)) {
|
|
showCustomAlert('Please enter a valid phone number (10-15 digits).');
|
|
return;
|
|
}
|
|
|
|
if (sqlInjectionRegex.test(message)) {
|
|
showCustomAlert('Your message contains invalid characters.');
|
|
return;
|
|
}
|
|
|
|
// Save feedback to localStorage
|
|
const feedbackData = {
|
|
name,
|
|
email,
|
|
phone,
|
|
message,
|
|
timestamp: new Date().toISOString(),
|
|
};
|
|
|
|
// Retrieve existing feedback data or initialize an empty array
|
|
const feedbackList = JSON.parse(localStorage.getItem('feedbackList')) || [];
|
|
feedbackList.push(feedbackData); // Add new feedback to the list
|
|
localStorage.setItem('feedbackList', JSON.stringify(feedbackList)); // Save updated list to localStorage
|
|
console.log('Feedback saved to localStorage:', feedbackList);
|
|
|
|
// Show success message
|
|
showCustomAlert('Thank you for your feedback! We appreciate hearing from you.');
|
|
feedbackForm.reset(); // Clear the input fields after submission
|
|
});
|
|
|
|
// Function to show the custom alert modal
|
|
function showCustomAlert(message) {
|
|
alertMessage.textContent = message; // Set modal message
|
|
alertBox.classList.remove('hidden'); // Display the modal
|
|
alertBox.style.display = 'flex'; // Ensure the modal is visible
|
|
}
|
|
|
|
// Function to close the custom alert modal
|
|
function closeCustomAlert() {
|
|
alertBox.classList.add('hidden'); // Hide the modal
|
|
alertBox.style.display = 'none'; // Ensure it's hidden
|
|
}
|
|
|
|
// Close modal on "OK" button click
|
|
alertOkButton.addEventListener('click', closeCustomAlert);
|
|
|
|
// Close modal on "X" button click
|
|
alertCloseButton.addEventListener('click', closeCustomAlert);
|
|
|
|
// Close modal when clicking outside the modal content
|
|
window.addEventListener('click', (event) => {
|
|
if (event.target === alertBox) {
|
|
closeCustomAlert();
|
|
}
|
|
});
|
|
});
|