Bestätigen Sie das Passwort mit jQuery Validate

Ich versuche, das jQuery-Validierungs-Plugin zu verwenden, um meine Passworteingabe zu bestätigen.

Ich möchte jedoch nicht, dass es ein Pflichtfeld ist.

Nur wenn ein Benutzer das Passwort ändern möchte, muss er es bestätigen.

Wenn nicht, sollten beide Felder nicht validiert werden.

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

Dies funktioniert einwandfrei, aber auch hier sind beide Felder erforderlich.

Ich hätte dies gerne optional, falls jemand nur seine E-Mail-Adresse oder seinen Benutzernamen ändern und das Passwort in Ruhe lassen möchte.

Entfernen Sie die required: trueRegel.

Demo: Geige

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

Nur ein kurzes Glockenspiel hier, um hoffentlich anderen zu helfen ... Besonders mit der neueren Version (da diese 2 Jahre alt ist) ...

Anstatt einige statische Felder in JS zu definieren, können Sie auch die data-rule-*Attribute verwenden. Sie können sowohl integrierte als auch benutzerdefinierte Regeln verwenden.

Informationen zu integrierten Regeln finden Sie unter http://jqueryvalidation.org/documentation/#link-list-of-built-in-validation-methods .

Beispiel:

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

Beachten Sie die data-rule-*Attribute.

Es funktioniert, wenn ID-Wert und Name unterschiedlich sind:

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

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

Im Allgemeinen werden Sie nicht so verwenden id="password". Sie können also [name="password"]anstelle von verwenden"#password"

Ich implementiere es in Play Framework und für mich hat es so funktioniert:

1) Beachten Sie, dass ich data-rule-sameTo im Eingabe-Tag für die ID inputPassword1 verwendet habe. Der Codeabschnitt des Benutzerformulars in meinem 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) Da ich Validator innerhalb eines Modals verwendet habe

$(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
       });

   });

Hoffe es hilft jemandem :).