Untitled

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('validateForm');
    const thankYouMessage = document.getElementById('thankYouMessage');
    const firstNameInput = document.getElementById('firstName');
    const lastNameInput = document.getElementById('lastName');
    const addressInput = document.getElementById('address');
    const cityInput  = document.getElementById('city');
    const stateInput  = document.getElementById('state');
    const zipInput  = document.getElementById('zip');
    const phoneNumberInput  = document.getElementById('phoneNumber');
    const emailInput = document.getElementById('email');
    const formErrorsDiv = document.getElementById('formErrors');
    const errorMessages = [];

    function checkForm() {
    //Reset my error styles when they don't fill something in
    firstNameInput.classList.remove('error');
    lastNameInput.classList.remove('error');
    addressInput.classList.remove('error');
    cityInput.classList.remove('error');
    stateInput.classList.remove('error');
    zipInput.classList.remove('error');
    phoneNumberInput.classList.remove('error');
    emailInput.classList.remove('error');

    function validateFirstAndLastName(){
        const firstName = firstNameInput.value.trim();
        const lastName = lastNameInput.value.trim();
        if(firstName === ''){
            errorMessages.push("First name can't be blank")
            firstNameInput.classList.add('error');
            return false;
        }
        if(firstName === lastName){
            errorMessages.push("First and Last name can't match.")
            firstNameInput.classList.add('error');
            lastNameInput.classList.add('error');
            return false;
        }
        if(lastName === ''){
            errorMessages.push("Last name can't be blank")
            firstNameInput.classList.add('error');
            return false;
        }
        return true;
    };

    function validateAddress(){
        const address = addressInput.value.trim();
        if(address === ''){
            errorMessages.push("Please input a valid street address.")
            addressInput.classList.add('error');
            return false;
        }
        return true;
    };

    function validateCity(){
        const city = cityInput.value.trim();
        if(city === ''){
            errorMessages.push("City can't be blank")
            cityInput.classList.add('error');
            return false;
        }
        return true;
    };

    function validateState(){
        const state = stateInput.value.trim();
        const validStates = 
        [
        'AL', 'AK', 'AZ', 'AR', 'CA', 
        'CO', 'CT', 'DE', 'FL', 'GA', 
        'HI', 'ID', 'IL', 'IN', 'IA', 
        'KS', 'KY', 'LA', 'ME', 'MD', 
        'MA', 'MI', 'MN', 'MS', 'MO', 
        'MT', 'NE', 'NV', 'NH', 'NJ', 
        'NM', 'NY', 'NC', 'ND', 'OH', 
        'OK', 'OR', 'PA', 'RI', 'SC', 
        'SD', 'TN', 'TX', 'UT', 'VT', 
        'VA', 'WA', 'WV', 'WI', 'WY'
        ];

        if (!validStates.includes(state)) {
            errorMessages.push("Please choose a valid state within the US.")
            stateInput.classList.add('error');
            return false;
        }
        return true;
    };

    function validateZip(){
        const zip = zipInput.value.trim();
        const zipPattern = /^\d{5}$/;
        if(!zipPattern.test(zip)){
            errorMessages.push('Invalid ZIP/Postal Code.');
            zipInput.classList.add('error');
            return false;
        }
        return true;
    };

    function validatePhone(){
        const phoneNumber = phoneNumberInput.value.trim();
        const phoneNumberPattern = /^\(\d{3}\) \d{3}-\d{4}$/;
        if(!phoneNumberPattern.test(phoneNumber)){
            errorMessages.push("Missing your First Name (Can't be blank).");
            phoneNumberInput.classList.add('error');
            return false;
        }
        return true;
    };

    function validateEmail(){
        const email = emailInput.value.trim();
        const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,5}$/;
        if (!emailPattern.test(email)) {
            errorMessages.push("Invalid or missing email address.");
            emailInput.classList.add('error');
            return false;
        }
    };
        // Perform validations
        validateFirstAndLastName();
        validateAddress();
        validateCity();
        validateState();
        validateZip();
        validatePhone();
        validateEmail();


        // Display errors if any
        if (errorMessages.length > 0) {
            formErrorsDiv.innerHTML = '<ul>' + errorMessages.map(msg => `<li>${msg}</li>`).join('') + '</ul>';
            formErrorsDiv.classList.remove('hide');
            return false;
            } else {
            formErrorsDiv.classList.add('hide');
            return true;
        }
    };

    function thankYouPage() {
        form.style.display = 'none'; // Hide the form
        thankYouMessage.style.display = 'block'; // Display the thank you message
    };

    document.getElementById("submit").addEventListener("click", function(event) {
        event.preventDefault(); // Prevent default form submission
        const isValid = checkForm();
        if(isValid){
            thankYouPage();
        } 
    });         
});