estoy tratando de validar un campo de email, mostrando un mensaje de error si el email no está bien introducido (con transición).
Si el email es correcto o el input está vacío el mensaje desaparece pero el contenido permanece.
He probado con inerHTML = ""
pero la transición deja de funcionar. ¿Que podría hacer para vaciar el contenido? Gracias de antemano.
const email = document.querySelector('#email');
eventListeners();
function eventListeners() {
email.addEventListener('keyup', validateEmail);
}
function validateEmail() {
const email = document.querySelector('.email'),
error = document.querySelector('.error'),
inputEmail = document.querySelector('#email'),
formatEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (inputEmail.value.match(formatEmail)) {
error.classList.remove("show");
} else {
if (inputEmail.value !== "") {
error.innerHTML = `<p>error</p>`;
error.classList.add("show")
} else {
error.classList.remove("show");
}
}
}
.error {
width: 200px;
max-height: 0;
transition: max-height 1s ease-out;
overflow: hidden;
background: #d5d5d5;
text-align: center;
}
.show {
max-height: 100px;
transition: max-height 1s ease-in;
}
<div class="name">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Name">
</div>
<div class="email">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Email">
<div class="error"></div>
</div>
<div class="password">
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Password">
</div>
innerHTML
, basta con que agregues o elimines la clase para que funcione.