[Bug] No funciona código de pattern para la validacion del campo password | HTML5 y CSS3 parte 1: Mi primera página web | Alura Latam

Buenas noches estimados; Cuando copie el código proporcionado en el módulo "JS en la Web_Manipulacion del DOM con JavaScript" Clase 02. Validación de Contraseña (02 Regex para Contraseña) no me funcionó el codigo de pattern utilizado por el profesor en esa clase ya que cuando lo guardé y validé en el navegador Chrome, asi escribiera cualquier cosa en el campo Password me aceptaba la contraseña sin ponerme ninguna restricción ni mensaje de advertencia.

<div class="input-container">
                        <input name="password" id="password" class="input" type="password" placeholder="Contraseña" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?!.*[ !@#$%^&*_=+-]).{6,12}$" title="Al menos 6 caracteres, máximo 12, debe contener una letra minúscula, una letra mayúscula, un número y no puede contener caracteres especiales.">
                        <label class="input-label" for="password">Contraseña</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>

Quedo atento a sus comentarios Saludos.

¡Hola Jean!

Lamento escuchar que estás teniendo problemas con el código de validación de contraseña. Parece que el patrón utilizado no está funcionando correctamente y te permite ingresar cualquier cosa en el campo de contraseña sin mostrar ningún mensaje de advertencia.

Una posible solución a este problema podría ser verificar si el navegador que estás utilizando es compatible con el atributo "pattern" en los campos de contraseña. Algunos navegadores pueden no admitir completamente esta funcionalidad.

Además, te recomendaría verificar si estás incluyendo correctamente el archivo JavaScript necesario para la validación de la contraseña. Asegúrate de que el archivo esté vinculado correctamente en tu página HTML y de que no haya errores en la consola del navegador.

Si después de verificar estos aspectos aún no funciona, te sugiero probar una validación de contraseña alternativa utilizando JavaScript. Aquí tienes un ejemplo de cómo podrías hacerlo:

const passwordInput = document.getElementById('password');
const errorMessage = document.querySelector('.input-message-error');

passwordInput.addEventListener('input', () => {
  const password = passwordInput.value;
  const pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?!.*[ !@#$%^&*_=+-]).{6,12}$/;

  if (!pattern.test(password)) {
    errorMessage.style.display = 'block';
  } else {
    errorMessage.style.display = 'none';
  }
});

Este código utiliza JavaScript para verificar si la contraseña cumple con el patrón especificado. Si la contraseña no coincide con el patrón, se muestra un mensaje de error. Puedes personalizar el mensaje de error y el estilo según tus necesidades.

Espero que esta solución alternativa te sea útil. Si tienes alguna otra pregunta, no dudes en hacerla.

¡Espero haber ayudado y buenos estudios!

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