0

Siguiendo los consejos de un colaborador de esta página web, decidí incluir el plugin de jquery validation

Ahora bien, estuve siguiendo un tutorial subido por los propios desarrolladores del plugin, donde implementan una función que llaman strongPaswword. En ella hacen lo siguiente:

$.validator.addMethod('strongPassword', function(value, element) {
    return this.optional(element) || value.length >= 6 && /\d/.test(value) && /[a-z]/i.test(value);
}, 'La contraseña debe tener por lo menos 6 caracteres y debe contener al menos un número y un caracter')

Pero algo esta mal porque el me cansé de poner cadenas del tipo "abcdef1$" etc etc etc que no funciona !!! Me gustó mucho el plugin y me gustaría poder terminar de implementarlo, pero bueno, encontré una barrera en este punto... alguien podrá darme una mano ?

Aquí el link del video

ven el error ?

ven el error ? cambie el campo de tipo password a formato texto para que vean que pongo mas de seis caracteres y un numero y el plugin no me valida la strongPassword

SIGUE EL ERROR, no he podido resolverlo...

1
  • 1
    Agrega el error, comportamiento, o lo que sea la barrrera que tienes; será de utilidad a quien sepa del tema. Incluye información que aporte más detalle de que ocurre.
    – user34391
    Commented el 12 sept. 2017 a las 0:18

1 respuesta 1

1

Esto es un ejemplo del plugin con tres elementos a validar, espero te sea de utilidad, todo esta comentado para cualquier duda

//importante para iniciar 
$(function () {
   //Valida solo letras en el campo asignado
    $.validator.addMethod("lettersonly", function (value, element) {
        return this.optional(element) || /^[a-z\s]*$/i.test(value);
    }, "Solo letras");
//Hace la validación del password, debe ser de la siguiente forma abcde1, a#1234, etc
    $.validator.addMethod('strongPassword', function (value, element) {
        return this.optional(element) || value.length >= 6 && /\d/.test(value) && /[a-z]/i.test(value);
    }, 'La contraseña debe tener por lo menos 6 caracteres y debe contener al menos un número y un caracter')
    //Formulario a validar
    $(".signup-form").validate({
       //Clases asignadas para el error y cuando son validas
        errorClass: "error-class",
        validClass: "valid-class",
        //Reglas
        rules: {
        //El campo con name = "fullname" es requerido y se aplica la validación de solo letras
            fullname: {
                required: true,
                lettersonly: true
            },
            //El campo con name ="email" es requerido y se aplica la validación por defecto de email
            email: {
                required: true,
                email: true
            },
            //El campo con name ="pass" es requerido y se aplica la validación strongPassword
            pass: {
                required: true,
                strongPassword: true
            },
            //El campo con name ="confirm_password" es requerido y se aplica la validación strongPassword y tiene que ser igual al campo con id="pass"
            confirm_password: {
					required: true,
          strongPassword: true,
					equalTo: "#pass"
			},

        },
        //Mensajes en caso de error
        messages: {
       //Campo con name fullname, si no contiene ningun elemento
        	fullname:{
        		required: "Ingresa nombre"
        	},
          //Campo con name pass, si no contiene ningun elemento
            pass: {
                required: "Ingresa nueva contraseña."
            },
            //Campo con name confirm_password, si no contiene ningun elemento
            confirm_password: {
                required: "Reingresa la contraseña."
            },
            //Campo con name email, si no contiene ningun elemento
            email: {
                required: "Ingresa Correo electrónico.",
                minlength: "Correo incorrecto"
            }
        }
    });

});
		.user_signup input[type="text"].error-class,
.user_signup input[type="email"].error-class,
.user_signup input[type="password"].error-class {
    border: 2px solid red;
    color: red;
}

.user_signup input.valid-class {
    border: 2px solid grey;
    color: black;
}

.user_signup label.error-class {

    color:red; margin-top:-20px; 
}

.user_signup {
    display: block;
}

.user_signup label {
    display: block;
    margin-bottom:5px;
    color:#666;
}

.user_signup input[type="text"], .user_signup input[type="email"], .user_signup input[type="password"] {
    display: block;
    width:100%;
    padding:15px;
    border-radius:5px;
    border:1.2px solid #DDD;
    font-size:20px;
    color:#333;
    font-family:arial;
    margin-bottom:20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.user_signup input[type="password"]:focus {
    outline: none;
    border-color: #39F;
}

.user_signup input[type="text"]:focus {
    outline: none;
    border-color: #39F;
}

.user_signup input[type="email"]:focus {
    outline: none;
    border-color: #39F;
}

.signupbtn {
    background: #F4F4F2;
    display:block;
    width:100%;
    padding:20px;
    margin:0px 0;
    font-size:20px;
    margin-top:15px;
    border-radius:5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color:#FFF;
    text-align:center;
    text-decoration:none;
    background:blue;
    cursor:pointer;
    outline:none !important;
    -webkit-appearance:none;
    border:none;
}

/*.btn_red {background:orange; color: #FFF; }*/
 .signupbtn:hover {
    background:blue;
    color:white;
}

.btnwrapper2 {
    display:inline-block;
    width:100%;
    height:auto;
    position:relative;
    clear:both;
    margin-top:0px;
    margin-right:10px;
}

.signup-form {
    text-align:left;
    float:left;
    display:inline-block;
}

.signup-form p {
    float:left;
    margin-bottom:15px;
    font-size:20px;
    clear:both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

<div class="user_signup" id="user_register1">
    <form class="signup-form">
        <input class="fullname errorClass" type="text" name="fullname" placeholder="First and Last Name" />
        <input class="email" type="email" name="email" placeholder="Email address" />
        <input id="pass" class="pass" name="pass" type="password" placeholder="New password" />
        <input class="confirm_password" name="confirm_password" type="password" placeholder="New password" />
        <div class="btnwrapper2">
            <input class="signupbtn" value="Sign up!" type="submit" />
        </div>
        <br />
        <br />
</div>
</form>
</div>

1
  • muchas gracias !!! voy a compararlo con lo que hice yo para ver en qué parte me fallaba el codigo... por lo que veo está igual. Gracias nuevamente
    – MNibor
    Commented el 12 sept. 2017 a las 14:42

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.