Solucionado (ver solución)
Solucionado
(ver solución)
5
respuestas

Problema con el pattern

Referente al curso JS en la Web: Validación de Formularios y HTML5, en el capítulo Validación de contraseña y actividad Regex para contraseña

por Janis Gizeh Urrea Rodríguez
| 54.8k xp | 17 posts
Analista QA

Hola, buenas noches!

Tengo problemas con la validación del password, tengo el código tal cual como el profesor y no logro que haga la validación. Si me pueden ayudar, muchas gracias!

<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 mayúscula, una letra minú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>
5 respuestas
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Janis!

Entiendo que estás teniendo problemas con la validación del campo de contraseña en tu formulario. Revisé el código que compartiste y parece estar correcto. Sin embargo, es posible que haya algún error en otro lugar de tu código que esté impidiendo que la validación funcione correctamente.

Aquí hay algunas cosas que podrías revisar para solucionar el problema:

  1. Asegúrate de que estás incluyendo la etiqueta <form> alrededor de tu formulario y que tienes un botón de tipo "submit" para enviar el formulario. Sin estos elementos, la validación no se activará.

  2. Verifica que estás incluyendo el archivo JavaScript necesario para la validación. Es posible que haya un error en ese archivo que esté afectando la funcionalidad.

  3. Comprueba que no haya ningún otro código en tu archivo JavaScript que esté afectando la validación del formulario. Es posible que haya alguna función o evento que esté interfiriendo con la validación del campo de contraseña.

Si revisas estos puntos y aún no logras solucionar el problema, te recomendaría que compartas más detalles sobre tu código y cualquier otro mensaje de error que estés recibiendo. De esta manera, podré ayudarte de manera más precisa.

¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)
por Janis Gizeh Urrea Rodríguez
| 54.8k xp | 17 posts
Analista QA

Hola Rafaela

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Doguito Petshop | Crear cuenta</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> 
    <link rel="stylesheet" href="./assets/css/base/base.css">
    <link rel="stylesheet" href="./assets/css/registro.css">
    <link rel="stylesheet" href="./assets/css/componentes/card.css">
    <link rel="stylesheet" href="./assets/css/componentes/inputs.css">
    <link rel="stylesheet" href="./assets/css/componentes/button.css">
</head>
<body>
    <main class="container flex flex--column flex--center">
        <div class="cadastro-cabecalho">
            <img src="./assets/img/doguito.svg" alt="Logo Doguito" class="registry-header__logo">
            <h1 class="registry-header__title">PetShop</h1>
        </div>
        <section class="cartao">
            <h2 class="card__title">Completa tu registro</h2>
            <form action="./registro_concluido.html" class="formulario flex flex--column">
                <fieldset>
                    <legend class="form__label">Información básica</legend>
                    <div class="input-container">
                        <input name="name" id="name" class="input" type="text" placeholder="Nombre" required>
                        <label class="input-label" for="name">Nombre</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>
                    <div class="input-container">
                        <input name="email" id="email" class="input" type="email" placeholder="Email" required>
                        <label class="input-label" for="email">Email</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>
                    <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 mayúscula, una letra minú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>
                </fieldset>
                <fieldset>
                    <legend class="form__label">Información personal</legend>
                    <div class="input-container">
                        <input name="birth" id="birth" class="input" type="date" placeholder="Fecha de nacimento" required>
                        <label class="input-label" for="birth">Fecha de nacimiento</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>
                    <div class="input-container">
                        <input name="phoneNumber" id="phoneNumber" class="input" type="text" placeholder="Número telefónico">
                        <label class="input-label" for="phoneNumber">Número telefónico</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>
                </fieldset>
                <fieldset>
                    <legend class="form__label">Dirección</legend>
                    <div class="input-container">
                        <input name="cep" id="cep" class="input" type="text" placeholder="CEP">
                        <label class="input-label" for="cep">Dirección completa</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>
                    <div class="input-container">
                        <input name="city" id="city" class="input" type="text" placeholder="Ciudad">
                        <label class="input-label" for="city">Ciudad</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>
                    <div class="input-container">
                        <input name="state" id="state" class="input" type="text" placeholder="Estado">
                        <label class="input-label" for="state">Estado</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>
                </fieldset>
                <button class="button">Registrar</a>
            </form>
        </section>
    </main>
    <script src="./js/validaciones.js"></script>
</body>
</html>
por Janis Gizeh Urrea Rodríguez
| 54.8k xp | 17 posts
Analista QA

Te dejo el código completo a ver si me puedes ayudar. Las etiquetas form están bien y cuando agregué el tipo submit no funcionó. En cuanto al archivo de JS aun no hemos agregado funciones. En el mensaje anterior excedía la cantidad de caracteres. Gracias!

solución!
por Freddy Alexander León Velandia
| 80.5k xp | 5 posts
Diseñador Gráfico

Hola Janis, tuve el mismo problema.

Encontré dos soluciones. La primera es buscar una expresión que haga lo mismo. En este caso encontré ésta:

^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]{6,12}$

En la cual, no se hace la negación de los caracteres especiales: 

(?!.*[ !@#$%^&*_=+-])

Sino que se hace otro conjunto en el cual se excluyen los caracteres especiales y solo se ponen las letras en minúscula, mayúscula y los números: 

[a-zA-Z0-9]

No sé explicarlo bien, pero funciona.

La otra solución la encontré en una sugerencia aquí en el foro, que hizo un compañero (Edwin), hace dos días.

Él explica que el signo de admiración ! es un carácter especial, por lo que se debe agregar un \ para que sea reconocido correctamente dentro de la expresión. (resumido)

Quedaría así: 

^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?!.*[ !@#$%^&*_=+\-]).{6,12}$

Probé ambas soluciones y me funcionaron.

por Janis Gizeh Urrea Rodríguez
| 54.8k xp | 17 posts
Analista QA

Hola Freddy, muchísimas gracias!!!

Probé las dos y funcionan perfecto.