Coming Soon Ping Page using HTML, CSS and JavaScript

Solution retrospective
I am very proud of how I used the blur and invalid events to optimize my email validation.
email.addEventListener("invalid", postError);
email.addEventListener("blur", clearError);
function postError() {
email.required = false;
email.type = "text";
email.setSelectionRange(email.value.length, email.value.length);
email.classList.add("error");
if (email.value === "") {
errorMessage.innerHTML = "Required!";
} else {
errorMessage.innerHTML = "Please provide a valid email address";
}
}
What challenges did you encounter, and how did you overcome them?
I had a hard time making the browser validation hints disappear while still utilizing the events mentioned above. I researched this problem, gained an understanding of what caused the hints to appear, and then figured out how to remove the hints when needed while still keeping the validation intact.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Robert Horosewski's solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord