[Resolved] repeat password validation

[Author]

Posts

[q1]

Hi,

I don't know if this feature is currently supported by cred user form or not. I wanted to make a registration form with a confirm/repeat password field. This is so far ok and possible. But I noticed that when the user has repeated the password then no check is made. The check is made after submitting the form.

Is this currently not possible? Because I noticed that you use a old version of the jquery.validate.js. Is it possible to disable this plugin only for the registration form so I can use the newer version an implement the validation rules myself?

Thanks a lot for your help!

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hello,

Thank you for contacting our support forum.

I must apologize for the extreme delay in response. The reason why this occurs is because the field validations are being done using php and in order for the validation to occur then the form must first be submitted.

You do have the option of using some javascript to do the validation check on the fly and display a message should the validation fail.

An example of this can be seen below.
hidden link

Please let me know if this helps.
Thanks,
Shane

[q1]

Hi,

no worries. I am happy to still get a reply 😉

Ok, I understand that validations are made on the server side. In case for the password confirmation this would be nice to have it already on the client side since it will save some time.

And thanks for the code snippet. I tried it but as it seems the ids are used to target the form and the inputs. Unfortunately the id's are generated because they are cred fields so I can't use the snippet like this

            $("#cred_form_8_1").validate({
                rules: {
                    user_pass: {
                        required: true,
                    } ,

                        user_pass2: {
                        equalTo: ".user_pass",
                    }
                },
                errorClass: "#wpt-form-message"
            });

because the html markup would be this when rendered

...
<div class="inlaid-label cred-field cred-field-user_pass animated">
    <div class="js-wpt-field-items js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="password-user_pass">
        <input type="password" id="cred_form_8_1-password-1-1465562904" name="user_pass" value="" class="user_pass wpt-form-password form-password password js-wpt-validate" data-wpt-validate="{"required":{"args":{"1":true},"message":"This field is required"}}" data-wpt-field-title="Password" data-wpt-type="password" data-wpt-id="cred_form_8_1_cred_form_8_1-password-1-1465562904" data-wpt-name="user_pass">
    </div>
    <label for="user_pass" class="animating-label">Password</label>
</div>
<div class="inlaid-label cred-field cred-field-user_pass2 animated">
    <div class="js-wpt-field-items js-wpt-repetitive wpt-repetitive" data-initial-conditional="" data-item_name="password-user_pass2">
        <input type="password" id="cred_form_8_1-password-2-1465562904" name="user_pass2" value="" class="user_pass2 wpt-form-password form-password password js-wpt-validate" data-wpt-validate="{"required":{"args":{"1":true},"message":"This field is required"}}" data-wpt-field-title="Repeat Password" data-wpt-type="password" data-wpt-id="cred_form_8_1_cred_form_8_1-password-2-1465562904" data-wpt-name="user_pass2">
    </div>
    <label for="user_pass2" class="animating-label">Repeat Password</label>
</div>
...

Is it possible to use classes instead of ids?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hello,

What you can do is instead of using an ID you can target the element using a class.

Using a class on the form element keeps through to the frontend so you should be able to get this working using a class.

Please let me know if this helps.
Thanks,
Shane

[q1]

Hi,

ok, using classes did the trick for me!

thanks for the hint and your help!