Bestätigen Sie das Passwort mit jQuery Validate

71

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.

jquery jquery-validate ldrocks
quelle
warum schaltest du nicht aus: erforderlich: falsch?
Hoàng Long
Ja, das habe ich versucht, aber dann funktioniert die Bestätigung nicht mehr. Ich meine, das Feld password_confirm ist erforderlich,
wenn
Oh, dann denke ich, dass Sie möglicherweise einen benutzerdefinierten Validator benötigen: docs.jquery.com/Plugins/Validation/Validator/addMethod
Hoàng Long

Antworten:

147

Entfernen Sie die required: trueRegel.

Demo: Geige

jQuery('.validatedForm').validate({
            rules : {
                password : {
                    minlength : 5
                },
                password_confirm : {
                    minlength : 5,
                    equalTo : "#password"
                }
            }
Arun P Johny
quelle
4
funktioniert nicht dann heißt es immer "bitte geben Sie den gleichen Wert noch einmal ein", obwohl beide Felder leer sind
ldrocks
Bitte posten Sie den Code. Fügen Sie die von Ihnen verwendete JQuery-Bibliotheksversion in Ihr Beispiel ein. Denn hier funktioniert diese Lösung nicht!
Deepcell
@ratnakar sollte es funktionieren. ... bearbeiten Sie die angehängte Geige, um das Problem neu zu erstellen
Arun P Johny
Nein es ist nicht funktioniert Arun, Bitte prüfen meinen Code einmal "user [Kennwort]": {minlength: 8}, "user [password_confirmation]": {minlength: 8, EqualTo: "#user_password"}
Ratnakar
Ich denke, wir brauchen keine Mindestlänge für das zweite Passwort, da diese EqualTo-Regel diesen Fall jedoch validiert. Habe ich recht?
Vignesh
32

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.

Rob W.
quelle
1
Dies ist eine bessere und einfachere Antwort als die erste, ich mag es, +1.
Haritsinh Gohil
1
Sie können data-msg-sameTo verwenden, um die Standardnachricht zu ändern
Leo
7

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' },
Krishna Kumar
quelle
4 
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"

PhonPanom
quelle
3

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 :).

Melis
quelle