web-dev-qa-db-fra.com

Confirmer le mot de passe avec jQuery Validate

J'essaie d'utiliser le plug-in de validation jQuery pour confirmer la saisie de mon mot de passe.

Cependant, je ne veux pas que ce soit un champ obligatoire.

Juste si un utilisateur veut changer le mot de passe, il lui faudra le confirmer.

Sinon, les deux champs ne doivent pas être validés.

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

Cela fonctionne parfaitement, mais encore une fois, les deux champs sont obligatoires.

Je voudrais avoir cette option, au cas où quelqu'un voudrait simplement changer par exemple son email ou son nom d'utilisateur et laisser le mot de passe seul.

jqueryjquery-validate
55
ldrocks

Supprimez la règle required: true.

Démo: Fiddle

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

Juste un petit coup ici pour aider, espérons-le, les autres ... Surtout avec la nouvelle version (puisqu'elle a 2 ans) ...

Au lieu de définir des champs statiques dans JS, vous pouvez également utiliser les attributs data-rule-*. Vous pouvez utiliser des règles intégrées ainsi que des règles personnalisées.

Voir http://jqueryvalidation.org/documentation/#link-list-of-built-in-validation-methods pour les règles intégrées.

Exemple:

<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>

Notez les attributs data-rule-*.

19
Half Crazed

Cela fonctionne si id value et name value sont différentes:

<input type="password" class="form-control"name="password" id="mainpassword">
password: {     required: true,     } , 
cpassword: {required: true, equalTo: '#mainpassword' },
5
Krishna Kumar
jQuery('.validatedForm').validate({
        rules : {
            password : {
                minlength : 5
            },
            password_confirm : {
                minlength : 5,
                equalTo : '[name="password"]'
            }
        }

En général, vous n'utiliserez pas id="password" comme ceci ..__, vous pouvez donc utiliser [name="password"] au lieu de "#password"

1
PhonPanom

Je l'implémente dans Play Framework et pour moi cela a fonctionné comme ceci:

1) Notez que j'ai utilisé data-rule-equalTo dans une balise input pour l'id inputPassword1 . La section de code de userform dans mon 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) Depuis que j'ai utilisé le validateur dans 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
       });

   });

J'espère que ça aide quelqu'un :).

1
Melis