script.js

// validation function
const validate = (result) => {
    const response = []
    const keys = Object.keys(result).filter(key => key !== "content")

    // return true if the whole inputs are validated otherwise false
    keys.forEach(key => {
        let el = document.getElementById(key)
        const value = result[key].value

        if(value === "") {
            if(el.classList.contains("is-valid")) {
                el.classList.remove("is-valid")
            }

            el.classList.add("is-invalid")
            el.nextElementSibling.textContent = `Enter a valid ${key}`

            // false if value is empty
            response[key] = false            
        } else {
            if(el.classList.contains("is-invalid")) {
                el.classList.remove("is-invalid")
            }

            switch (key) {
                case "name":
                    // true if name has at least three chars
                    response[key] = value.length >= 3 ? true : false

                    if(response) {
                        el.classList.add("is-valid")
                        el.nextElementSibling.textContent = ""
                    } else {
                        el.classList.add("is-invalid")
                        el.nextElementSibling.textContent = `${key} must have at least three characters`
                    }

                    break
                case "email":
                    // true if email check is ok
                    const regex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/
                    response[key] = regex.test(value) ? true : false

                    if(response) {
                        el.classList.add("is-valid")
                        el.nextElementSibling.textContent = ""
                    } else {
                        el.classList.add("is-invalid")
                        el.nextElementSibling.textContent = `Enter a valid ${key}`
                    }

                    break
                default:
                    response[key] = true
                    break
            }
        }
    })

    for(const key in response) {
        if(!response[key]) {
            return false
        }
    }

    return true
}

form.onsubmit = async (e) => {
    e.preventDefault()

    const form = e.target
    let result = {
        name: form.name,
        email: form.email,
        issue: form.issue,
        content: form.content,
    }

    // print result
    const body = document.getElementById("result")
    body.innerHTML = `<div>
        <div><strong>Name</strong> ${result.name.value}</div>
        <div><strong>Email</strong> ${result.email.value}</div>
        <div><strong>Request</strong> ${result.issue.value}</div>
        <p>
            <div><strong>Content of the contact request</strong></div> 
            <div>${result.content.value === "" ? "No content" : result.content.value.replace(/(<([^>]+)>)/gi, "")}</div>
        </p>
    </div>`

    const myModal = new bootstrap.Modal(".modal")
    const dialog = myModal._element                
    if(dialog.classList.contains("animate-out")) {
        dialog.classList.remove("animate-out") 
    }

    dialog.classList.add("animate-in")  
    const isValid = validate(result)

    // show modal if every value in result is not empty except content otherwise validate form
    if(isValid) {
        myModal.show() 
        
        const closeBtn = document.getElementById("close")
        closeBtn.addEventListener('click', e => {
            e.preventDefault()
            
            dialog.classList.remove("animate-in")
            dialog.classList.add("animate-out")
            
            dialog.onanimationend = () => {
                myModal.hide()
            }
        })
    }
}

document.addEventListener("DOMContentLoaded", () => {
    const form = document.forms.form
    Array.from(form).slice(0, 2).forEach(el => {
        el.onchange = e => {
            const obj = {}
            obj[e.currentTarget.name] = e.currentTarget
            validate(obj)
        }
    })
})