Creé un formulario de registro con validación en nombre de usuario, nombre, contraseña y confirmación de contraseña. Todas las validaciones funcionan al hacer clic en un botón de envío, pero quiero las validaciones en tiempo de ejecución, como si el usuario ingresara una contraseña. El usuario debería ver las validaciones incluso antes. haciendo clic en el botón enviar

 form.addEventListener('submit', e => { e.preventDefault(); checkInputs(); }); function checkInputs() { // trim to remove the whitespaces const usernameValue = username.value.trim(); const emailValue = email.value.trim(); const passwordValue = password.value.trim(); const password2Value = password2.value.trim(); var numbers = /[0-9]/; var char = /[!@#$%^&*()+_{}|]/; var pwd = /^(?=.*[az])/; var pwd1 = /^(?=.*[AZ])/; var pwd2 = /^(?=.*[0-9])/; if (usernameValue === '') { setErrorFor(username, 'Username cannot be blank'); } else { if (usernameValue.match(numbers) || usernameValue.match(char)) { setErrorFor(username, 'Username can only contain letters'); } else { setSuccessFor(username); } } if (emailValue === '') { setErrorFor(email, 'Email cannot be blank'); } else if (!isEmail(emailValue)) { setErrorFor(email, 'Not a valid email'); } else { setSuccessFor(email); } if (passwordValue === '') { setErrorFor(password, 'Password cannot be blank'); } else if (passwordValue.length < 8) { setErrorFor(password, 'Password must a minimum of 8 characters'); } else if (pwd.test(passwordValue) == false) { setErrorFor(password,'Password must have 1 lowerCase letter'); } else if (pwd1.test(passwordValue) == false) { setErrorFor(password,'Password must have 1 UpperCase letter'); } else if (pwd2.test(passwordValue) == false) { setErrorFor(password,'Password must have 1 Number'); } else { setSuccessFor(password); } if (password2Value === '') { setErrorFor(password2, 'Password2 cannot be blank'); } else if (passwordValue !== password2Value) { setErrorFor(password2, 'Passwords does not match'); } else { setSuccessFor(password2); } } function setErrorFor(input, message) { const formControl = input.parentElement; const small = formControl.querySelector('small'); formControl.className = 'form-control error'; small.innerText = message; } function setSuccessFor(input) { const formControl = input.parentElement; formControl.className = 'form-control success'; }

por favor, sugiérame algo, ¿cómo puedo hacer que funcione en tiempo de ejecución?