form.js

let form = document.querySelector('#myform');
form.addEventListener('submit', submit);

let name = document.querySelector('#name');
let email = document.querySelector('#email');
let subject = document.querySelector('#subject');
let message = document.querySelector('#message');
let inputList = [name, email, subject, message];



inputList.forEach(input => {
   input.addEventListener('blur', findInputError)
});

function findInputError(e) {
    let input = e.currentTarget.id
    let errorMessage = document.querySelector(`#${input}-error`)
    console.log(input)
    if (e.currentTarget.value) {
        errorMessage.innerHTML = ''
    } else {
        errorMessage.innerHTML = `${input} must be filled out.`
    }
}

function validate(e) {
    if (name.value && email.value && subject.value && message.value) {
        console.log("hooray");
    } else {
        inputList.forEach(input => {
            let inputName = input.id;
            let errorMessage = document.querySelector(`#${inputName}-error`);
            if (input.value) {
                errorMessage.innerHTML = '';    
            } else {
                 errorMessage.innerHTML = `${inputName} must be filled out.`;
            }
        });
        e.preventDefault();
    }
}

function submit(e) {
    const formData = new FormData(this);
    validate(e);
    fetch('https://formspree.io/moqlodoz', {
        method: 'post',
        body: formData
    }).then((response) => {
        return response;
    }).then((data) => {
        console.log(data);
    });
}