root
118 lines
4.3 KiB
JavaScript
118 lines
4.3 KiB
JavaScript
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"));
|
|
}
|
|
});
|
|
});
|
|
|