strength - password equal jquery

Confirmar contraseña con jQuery Validar

Question

Estoy tratando de usar el complemento jQuery validate para confirmar mi entrada de contraseña.

Sin embargo, no quiero que sea un campo obligatorio.

Solo si un usuario quiere cambiar la contraseña, necesitaría confirmarla.

De lo contrario, ambos campos no deberían validarse.

jQuery(''.validatedForm'').validate({
    rules: {
        password: {
            required: true,
            minlength: 5
        },
        password_confirm: {
            required: true,
            minlength: 5,
            equalTo: "#password"
        }
    }
}); 

Esto está funcionando perfectamente, pero de nuevo, se requieren ambos campos.

Me gustaría que esto sea opcional, en caso de que alguien simplemente quiera cambiar, por ejemplo, su correo electrónico o nombre de usuario y deje la contraseña sola.

Answer 1

Elimine la regla required: true .

Demostración: Fiddle

jQuery(''.validatedForm'').validate({
            rules : {
                password : {
                    minlength : 5
                },
                password_confirm : {
                    minlength : 5,
                    equalTo : "#password"
                }
            }

Answer 2

Funciona si el valor de identificación y el nombre son diferentes:

<input type="password" class="form-control"name="password" id="mainpassword">
password: {     required: true,     } , 
cpassword: {required: true, equalTo: ''#mainpassword'' },

Answer 3

Lo estoy implementando en Play Framework y para mí funcionaba así:

1) Observe que utilicé data-rule-equalTo en la etiqueta de entrada para la id inputPassword1. La sección de código de userform en mi Modal:

<div class="form-group">
    <label for="pass1">@Messages("authentication.password")</label>
    <input class="form-control required" id="inputPassword1" placeholder="@Messages("authentication.password")" type="password" name="password" maxlength=10 minlength=5>
</div>
<div class="form-group">
    <label for="pass2">@Messages("authentication.password2")</label>
    <input class="form-control required" data-rule-equalTo="#inputPassword1" id="inputPassword2" placeholder="@Messages("authentication.password")" type="password" name="password2">
</div>

2) Desde que usé el validador dentro de un Modal

$(document).on("click", ".createUserModal", function () {
       $(this).find(''#userform'').validate({
           rules: {
               firstName: "required",
               lastName: "required",
               nationalId: {
                   required: true,
                   digits:true
               },
               email: {
                   required: true,
                   email: true
               },
               optradio: "required",
               password :{
                   required: true,
                   minlength: 5
               },
               password2: {
                   required: true
               }
           },
           highlight: function (element) {
               $(element).parent().addClass(''error'')
           },
           unhighlight: function (element) {
               $(element).parent().removeClass(''error'')
           },
           onsubmit: true
       });

   });

Espero que ayude a alguien :).

Answer 4

Solo un breve aviso aquí para ayudar a otros ... Especialmente con la versión más nueva (ya que tiene 2 años) ...

En lugar de tener algunos campos estáticos definidos en JS, también puede usar los atributos data-rule-* . Puede usar reglas incorporadas, así como reglas personalizadas.

Consulte http://jqueryvalidation.org/documentation/#link-list-of-built-in-validation-methods para conocer las reglas incorporadas.

Ejemplo:

<p><label>Email: <input type="text" name="email" id="email" data-rule-email="true" required></label></p>
<p><label>Confirm Email: <input type="text" name="email" id="email_confirm" data-rule-email="true" data-rule-equalTo="#email" required></label></p>

Tenga en cuenta los atributos data-rule-* .

Answer 5

jQuery(''.validatedForm'').validate({
        rules : {
            password : {
                minlength : 5
            },
            password_confirm : {
                minlength : 5,
                equalTo : ''[name="password"]''
            }
        }

En general, no usarás id="password" esta manera. Entonces, puedes usar [name="password"] lugar de "#password"