1

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>

3
  • como quieres conservar tu animación y la haces desde el css, lo que pudieras hacer es agregar un timeout, donde remueves la clase show, y agregar tu linea de el innerHtml. Commented el 19 oct. 2020 a las 0:36
  • @Eduardo Jaramillo Licea Es una buena solución gracias. Pero ya que lo mencionas, ¿ Como podria animar ese mensaje desde javascript ? ¿serias tan amanle de mostrarme un ejemplo aplicado al codigo? Se que se puede pero estoy empezando a programar y no sabria como hacerlo, un saludo.
    – Oscar VA
    Commented el 19 oct. 2020 a las 2:16
  • No es necesario "limpiar" con innerHTML, basta con que agregues o elimines la clase para que funcione.
    – Triby
    Commented el 19 oct. 2020 a las 18:01

1 respuesta 1

0

Seria bueno que en vez de Keyup lo cambias a Change, ya que los métodos funcionan al quitar el focus en el input o al termino de hacer un cambio en este

const email = document.querySelector('#email');

eventListeners();

function eventListeners() {
  email.addEventListener('change', 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>`;
      inputEmail.value = ''
      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>

Saludos! 💛

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.