How can I toggle the visibility of a button based on form field validation in JavaScript? I want to show or hide the button when the .confirm button is clicked, and if the form is valid, add a checkmark to the body element through event listener.
The issue I'm facing is that only the first two lines of code are executing, but the event listener is not working. Any advice on how I can correctly toggle buttons, display the checkmark, and handle the form validation properly?
if (form.checkValidity()) {
document.querySelector(".formSubmit").classList.add("formSubmitShow");
document.querySelector(".confirm").classList.add("confirmHide");
document.querySelector(".confirm").addEventListener("click", (e)=>{
body.classList.add("checkmark");
});
} else {
formElements.forEach((el) => {
if (!el.checkValidity()) {
el.classList.add("invalid");
}
});
}
.checkmark {
content: url(static/gifs/check.gif);
}