Conflict when validating a password with jqueryvalidation

0

Following the advice of a contributor to this web page, I decided to include the jquery validation

plugin

Now, I was following a tutorial uploaded by the developers of the plugin, where they implement a function called strongPaswword. In it they do the following:

$.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')

But something is wrong because he got tired of putting strings like "abcdef1 $" etc etc etc that does not work !!! I really liked the plugin and I would like to finish implementing it, but hey, I found a barrier at this point ... Can someone give me a hand?

Here the video link

see the error? change the field of type password to text format so that they see that I put more than six characters and a number and the plugin does not validate me the strongPassword

FOLLOW THE ERROR, I could not solve it ...

    
asked by MNibor 12.09.2017 в 02:05
source

1 answer

1

This is an example of the plugin with three elements to validate, I hope it is useful, everything is commented for any questions

//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>
    
answered by 12.09.2017 / 16:38
source