Costume Rental Request

document.addEventListener('DOMContentLoaded', function() { const phoneInput = document.getElementById('contact-number'); const emailInput = document.getElementById('email'); const submitBtn = document.getElementById('submit-button'); const emailError = document.getElementById('email-error'); const phoneError = document.getElementById('phone-error'); const selectElement = document.getElementById('age-group'); let isSubmitting = false; // Validate U.S. mobile format (+1 10 digits) function validatePhone() { const value = phoneInput.value.trim(); const regex = /^\+1\s?\d{10}$/; if (value === "" || regex.test(value)) { phoneError.style.display = "none"; return true; } else { phoneError.style.display = "block"; return false; } } // Validate email format function validateEmail() { const value = emailInput.value.trim(); const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (value === "" || regex.test(value)) { emailError.style.display = "none"; return true; } else { emailError.style.display = "block"; return false; } } // Validate required fields function validateRequiredFields() { const requiredFields = document.querySelectorAll('input[required], select[required]'); let allValid = true; requiredFields.forEach(field => { if (!field.value.trim()) allValid = false; }); return allValid; } // Validate overall form function validateForm() { if (isSubmitting) return false; const requiredValid = validateRequiredFields(); const phoneValid = validatePhone(); const emailValid = validateEmail(); const allValid = requiredValid && phoneValid && emailValid; if (allValid) { submitBtn.disabled = false; submitBtn.style.opacity = "1"; submitBtn.style.cursor = "pointer"; } else { submitBtn.disabled = true; submitBtn.style.opacity = "0.6"; submitBtn.style.cursor = "not-allowed"; } return allValid; } // Reset form function function resetForm() { const form = document.getElementById('rentalForm'); form.reset(); if (selectElement) selectElement.value = ""; // Reset button state submitBtn.textContent = "Submit Request"; submitBtn.disabled = true; submitBtn.style.opacity = "0.6"; submitBtn.style.cursor = "not-allowed"; // Hide error messages emailError.style.display = "none"; phoneError.style.display = "none"; // Reset submission flag isSubmitting = false; } document.querySelectorAll('input, select, textarea').forEach(el => { el.addEventListener('input', validateForm); el.addEventListener('change', validateForm); }); phoneInput.addEventListener('input', validatePhone); emailInput.addEventListener('input', validateEmail); document.getElementById('rentalForm').addEventListener('submit', function(e) { e.preventDefault(); if (isSubmitting) { return false; } // Final validation before submission if (!validateForm()) { return false; } isSubmitting = true; submitBtn.disabled = true; submitBtn.textContent = "Submitting..."; // Simulate form submission setTimeout(function() { alert("✅ Your form has been submitted successfully!"); resetForm(); }, 500); }); // Contact Form 7 integration document.addEventListener('wpcf7mailsent', function(event) { alert("✅ Your form has been submitted successfully!"); resetForm(); }, false); });