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(); } }); });