const inputs = document.querySelectorAll("input")

inputs.forEach(input => {
    input.addEventListener(
        "invalid",
        () => {
            input.classList.add("error")
            input.nextElementSibling.style.display = "inline"
        },
        false
    )

    input.addEventListener(
        "input",
        event => checkValidityOnInput(event),
        false
    )
})

function checkValidityOnInput(e){
    e.target.checkValidity()
    if(e.target.validity.valid) {
        e.target.classList.remove("error")
        e.target.nextElementSibling.style.display = "none"
    }
}