feat: add contact-form.js with input validation and error messaging

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("<br>");
+    } else {
+        errorDiv.innerHTML = "";
+        alert("Form submitted successfully!");
+        // this.submit(); // Uncomment if actually submitting to a server
+    }
+});
+
+// This script isn't finished.