diff --git a/src/scripts/contact-form.js b/src/scripts/contact-form.js new file mode 100644 index 0000000..287bf7b --- /dev/null +++ b/src/scripts/contact-form.js @@ -0,0 +1,68 @@ +// Contact Form Submission Script + +// Select Form Element +const form = document.getElementById("contact-form"); + +// Event Listener for Submit Event +form.addEventListener('submit', function(event) { + event.preventDefault(); // Prevent default form submission + + // Variable Assignments + const firstName = document.getElementById('first-name').value.trim(); + const lastName = document.getElementById('last-name').value.trim(); + const organization = document.getElementById('organization').value.trim(); // Fixed typo + const email = document.getElementById('email').value.trim(); + const phone = document.getElementById('phone').value.trim(); + const contactMethod = document.querySelector('input[name="contact-method"]:checked')?.value; + const message = document.getElementById('message').value.trim(); + + const errorMessages = []; + + // First name validation + if (!firstName) { + errorMessages.push("Please enter your first name."); + } else if (firstName.length < 2) { + errorMessages.push("First name must be at least 2 characters."); + } + + // Last name validation + if (!lastName) { + errorMessages.push("Please enter your last name."); + } else if (lastName.length < 2) { + errorMessages.push("Last name must be at least 2 characters."); + } + + // Email validation + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailPattern.test(email)) { + errorMessages.push("Please enter a valid email address."); + } + + // Phone number validation (exactly 10 digits) + const phonePattern = /^\d{10}$/; + if (!phonePattern.test(phone)) { + errorMessages.push("Phone number must be exactly 10 digits (numbers only)."); + } + + // Message validation + if (message.length < 10) { + errorMessages.push("Message must be at least 10 characters long."); + } + + // Optional: Organization validation (only if provided) + if (organization.length > 0 && organization.length < 2) { + errorMessages.push("Organization name must be at least 2 characters if provided."); + } + + // Display errors or submit + const errorDiv = document.getElementById('errorMessages'); + if (errorMessages.length > 0) { + errorDiv.innerHTML = errorMessages.join("
"); + } else { + errorDiv.innerHTML = ""; + alert("Form submitted successfully!"); + // this.submit(); // Uncomment if actually submitting to a server + } +}); + +// This script isn't finished.