1
respuesta

Confirmación de contraseña

Hola todos. Al momento de diligenciar un formulario o darnos de alta en algun sitio web, por lo general se solicita el campo "confirmar contraseña" sería interesante que mostraran como se efectua ese campo y como se valida que ambas contraseñas coincidan. Desconozco si en otros videosmas adelante de este curso se aborda el tema. Saludos

1 respuesta

¡Hola Derick!

Para agregar un campo de confirmación de contraseña en un formulario, puedes hacer lo siguiente:

  1. Agrega un campo de contraseña en tu formulario, utilizando el elemento <input> con el atributo type="password".
<label for="password">Contraseña:</label>
<input type="password" id="password" name="password">
  1. A continuación, agrega otro campo de contraseña para la confirmación, utilizando nuevamente el elemento <input> con el atributo type="password".
<label for="confirm-password">Confirmar Contraseña:</label>
<input type="password" id="confirm-password" name="confirm-password">
  1. Ahora, para validar que ambas contraseñas coincidan, puedes utilizar JavaScript. Puedes hacerlo de la siguiente manera:
const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirm-password');

function validarContraseña() {
  if (passwordInput.value !== confirmPasswordInput.value) {
    confirmPasswordInput.setCustomValidity('Las contraseñas no coinciden');
  } else {
    confirmPasswordInput.setCustomValidity('');
  }
}

passwordInput.addEventListener('input', validarContraseña);
confirmPasswordInput.addEventListener('input', validarContraseña);

En este ejemplo, utilizamos el método setCustomValidity() para establecer un mensaje de error personalizado en el campo de confirmación de contraseña si las contraseñas no coinciden. Si las contraseñas coinciden, eliminamos cualquier mensaje de error estableciendo una cadena vacía como valor.

Recuerda que este es solo un ejemplo básico y que podrías agregar más validaciones según tus necesidades, como asegurarte de que la contraseña tenga una longitud mínima o contenga caracteres especiales.

Espero que esta información te sea útil. ¡Si tienes alguna otra pregunta, estaré encantado de ayudarte! ¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)