Skip to main content
2 de 2
Mejora de título
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88

CSS y javascript vaciar el contenido de un campo

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>