recreate project

public/assets/js/registration_validator.js

@@ -0,0 +1,118 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const form = document.querySelector("form");
+    const email = document.getElementById("email");
+    const confirmEmail = document.getElementById("confirmEmail");
+
+    // Disable copy/paste for confirm email
+    confirmEmail.addEventListener("paste", function (e) {
+        e.preventDefault();
+        alert("Pasting is disabled in the confirm email field.");
+    });
+    confirmEmail.addEventListener("copy", function (e) {
+        e.preventDefault();
+    });
+
+    form.addEventListener("submit", function (e) {
+        let isValid = true;
+        let messages = [];
+
+        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        const alphanumericPattern = /^[A-Za-z0-9 ]+$/;
+        const alphaOnlyPattern = /^[A-Za-z ]+$/;
+
+        // Validate required fields
+        const requiredFields = [
+            "firstName", "lastName", "email", "confirmEmail", "phone",
+            "street", "city", "state", "zip", "captcha", "acceptPolicy"
+        ];
+
+        for (const fieldId of requiredFields) {
+            const field = document.getElementById(fieldId);
+            if (field) {
+                if ((field.type === "checkbox" || field.type === "radio") && !field.checked) {
+                    const groupName = field.name || field.id;
+                    const anyChecked = document.querySelector(`input[name='${groupName}']:checked`);
+                    if (!anyChecked) {
+                        messages.push(`Please select a value for ${groupName}.`);
+                        isValid = false;
+                    }
+                } else if (!field.value.trim()) {
+                    messages.push(`Please fill out the ${fieldId} field.`);
+                    isValid = false;
+                }
+            }
+        }
+
+        // Gender radio group validation
+        const genderSelected = document.querySelector("input[name='gender']:checked");
+        if (!genderSelected) {
+            messages.push("Please select your gender.");
+            isValid = false;
+        }
+
+        // Email format check
+        if (!emailPattern.test(email.value.trim())) {
+            messages.push("Email format is invalid.");
+            isValid = false;
+        }
+        if (!emailPattern.test(confirmEmail.value.trim())) {
+            messages.push("Confirm Email format is invalid.");
+            isValid = false;
+        }
+
+        // Email match check
+        if (email.value.trim() !== confirmEmail.value.trim()) {
+            messages.push("Email and Confirm Email do not match.");
+            isValid = false;
+        }
+
+        // ZIP code validation
+        const zip = document.getElementById("zip");
+        if (zip && !/^\d{5}$/.test(zip.value.trim())) {
+            messages.push("ZIP code must be exactly 5 digits.");
+            isValid = false;
+        }
+
+        // Alphanumeric field validation
+        const alphanumericFields = ["firstName", "lastName", "street", "apt"];
+        for (const id of alphanumericFields) {
+            const field = document.getElementById(id);
+            if (field && field.value.trim() !== "" && !alphanumericPattern.test(field.value)) {
+                messages.push(`${id} must contain only letters, numbers, and spaces.`);
+                isValid = false;
+            }
+        }
+
+        // City must contain only letters and spaces
+        const city = document.getElementById("city");
+        if (city && city.value.trim() !== "" && !alphaOnlyPattern.test(city.value)) {
+            messages.push("City must contain only letters and spaces.");
+            isValid = false;
+        }
+
+        // Character length validation
+        const lengthChecks = [
+            { id: "firstName", max: 30 },
+            { id: "lastName", max: 30 },
+            { id: "email", max: 30 },
+            { id: "confirmEmail", max: 30 },
+            { id: "street", max: 30 },
+            { id: "city", max: 30 },
+            { id: "phone", max: 14 },
+            { id: "apt", max: 5 },
+        ];
+        for (const check of lengthChecks) {
+            const field = document.getElementById(check.id);
+            if (field && field.value.length > check.max) {
+                messages.push(`${check.id} must not exceed ${check.max} characters.`);
+                isValid = false;
+            }
+        }
+
+        if (!isValid) {
+            e.preventDefault();
+            alert(messages.join("\n"));
+        }
+    });
+});
+