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

Esta bien hecha esta funcion que muestra mensaje CSS y javascript vaciar el contenido de errorun campo

estoy tratando de validar un campo de email, mostrando un mensaje de error si el email no está bien introducido (con transición). En teoría funciona bien pero no sé si la función está realmente bien planteada. Además, si la

Si el email es correcto o el input está vacío el mensaje desaparece pero el contenido permanece, he.

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>

Esta bien hecha esta funcion que muestra mensaje de error

estoy tratando de validar un campo de email, mostrando un mensaje de error si el email no está bien introducido (con transición). En teoría funciona bien pero no sé si la función está realmente bien planteada. Además, si la 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>

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>

Origen Enlace

Esta bien hecha esta funcion que muestra mensaje de error

estoy tratando de validar un campo de email, mostrando un mensaje de error si el email no está bien introducido (con transición). En teoría funciona bien pero no sé si la función está realmente bien planteada. Además, si la 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>