Problem Statement
Explain a simple pattern to show real time validation as the user types.
Explanation
Listen for the input event on fields and check their validity. Then toggle the classes .is-valid or .is-invalid based on the result.
Validate on blur for heavy checks like server-side email verification. Keep messages short and clear to help users correct errors easily.
Code Solution
SolutionRead Only
const email = document.querySelector('#em');
email.addEventListener('input', () => {
email.classList.toggle('is-valid', email.checkValidity());
email.classList.toggle('is-invalid', !email.checkValidity());
});