validation.js

document.getElementById("submitBtn").addEventListener("click", validateForm);
document.getElementById("clearBtn").addEventListener("click", clearForm);

function validateForm() {
    const username = document.getElementById("username").value.trim();
    const email = document.getElementById("email").value.trim();
    const phone = document.getElementById("phone").value.trim();
    const password = document.getElementById("password").value.trim();
    const confirm = document.getElementById("confirm").value.trim();
    const gender = document.querySelector('input[name="gender"]:checked');
    const age = document.getElementById("age").value;

    const usernameRegex = /^[a-z0-9]{4,12}$/;
    const emailRegex = /^[\w.-]+@[a-zA-Z\d.-]+\.(com|net|org|edu)$/;
    const phoneRegex = /^\(\d{3}\)-\d{3}-\d{4}$/;
    // Strong password now required:
    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*\W).{8,}$/;

    resetLabels();

    function setLabel(labelId, colorClass) {
        const label = document.getElementById(labelId);
        label.classList.remove("error", "warning");
        if (colorClass) label.classList.add(colorClass);
    }

    // Username
    if (username === "") setLabel("usernameLabel", "error");
    else if (!usernameRegex.test(username)) setLabel("usernameLabel", "warning");

    // Email
    if (email === "") setLabel("emailLabel", "error");
    else if (!emailRegex.test(email)) setLabel("emailLabel", "warning");

    // Phone
    if (phone === "") setLabel("phoneLabel", "error");
    else if (!phoneRegex.test(phone)) setLabel("phoneLabel", "warning");

    // Password
    if (password === "") setLabel("passwordLabel", "error");
    else if (!passwordRegex.test(password)) {
        setLabel("passwordLabel", "warning");
        alert("Password must include at least 1 uppercase, 1 lowercase, 1 number, and 1 special character.");
    }

    // Confirm Password
    if (confirm === "") setLabel("confirmLabel", "error");
    else if (confirm !== password) {
        alert("Passwords do not match!");
        setLabel("confirmLabel", "warning");
    }

    // Gender
    if (!gender) {
        setLabel("Gender", "error");
        alert("Please select a gender.");
    }

    // Age group
    if (age === "") setLabel("ageLabel", "error");
}

function resetLabels() {
    const labels = document.querySelectorAll("label");
    labels.forEach(label => label.classList.remove("error", "warning"));
}

function clearForm() {
    resetLabels();
}